Какой класс bootstrap 3 следует использовать для создания вертикального списка элементов/ "карт" (Rails 3.2, bootstrap3)

Я создаю ежедневное приложение для изучения Ruby on Rails.

Сейчас я создаю вид домашней страницы. Я хотел бы, чтобы это был просто вертикальный список "карточек" (см. Https://www.intercom.com/blog/why-cards-are-the-future-of-the-web/) или, проще говоря, вертикальный список элементов, каждый из которых представляет собой горизонтальный прямоугольник с серой рамкой.

Я новичок в Bootstrap и есть так много доступных классов. Есть ли один, который я мог бы использовать для этих "карт", даже если мне придется потом переопределить немного его CSS?

Вот пример типа "простого списка вертикальных прямоугольников", который я хотел бы получить.

simple vertical rectangle list layout

Может быть класс " list-group-item ", но все мои прямоугольники разделены, как вы видите на картинке (т.е. они не соприкасаются друг с другом), и мне нужен красный заголовок над каждым прямоугольником (то есть заголовок находится за пределами прямоугольника/элемента ) поэтому я не уверен, что это правильный выбор.

Есть ли лучшее соответствие для класса в Bootstrap 3 для того, что я хочу сделать?

Ответы

Ответ 1

На моей голове вы выплевываете неупорядоченный список ul > list-group-item > div > more div > text

Я сделал пример. Оформить заказ здесь https://jsfiddle.net/kuntau/X5Wvn/

HTML

<div class="container" >
    <ul class="list-group">
    <li>
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="panel-info">
                    <p><strong>Tel: 011-345-898</strong></p>
                    <p>9182 Lorem Ipsum<br />
                        consectetur adipiscing elit.<br />
                       Nullam vel lacus felis.</p>
                </div>
                <div class="panel-rating">
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <p>Rate Yourself!</p>
                </div>
                <div class="panel-more1">
                    <img src="http://lorempixel.com/100/100" />
                    <br /><span>Caption</span>
                </div>
                <div class="panel-more1">
                    <img src="http://lorempixel.com/100/100" />
                    <br /><span>Caption</span>
                </div>
                <div class="panel-more1">
                    <img src="http://lorempixel.com/100/100" />
                    <br /><span>Caption</span>
                </div>
            </div>
        </div>
    </li>
</ul>
</div>

CSS

.list-group li {
    list-style: none;
}
.panel-info, .panel-rating, .panel-more1 {
    float: left;
    margin: 0 10px;
}

Ответ 2

Как насчет использования панели с системой заголовка и сетки для полного использования отзывчивости:

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">Item title</h3>
    </div>
    <div class="panel-body">
        <div class="row">
            <div class="col-sm-3">first column</div>
            <div class="col-sm-3">secondcolumn</div>
            <div class="col-sm-2">3rd column</div>
            <div class="col-sm-2">4th column</div>
            <div class="col-sm-2">5th column</div>
        </div>

Немного CSS для визуализации вертикальных границ:

div.row > div:first-child {
    border-right: 1px solid #ccc;
}
div.row > div:nth-child(5) {
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
}

Проверьте эту скрипку: https://jsfiddle.net/bostaf/eqn93g6j/. Измените размер окна просмотра, чтобы увидеть отзывчивость в действии.