html - 我应该使用哪个 bootstrap 3 类来创建元素/"cards"的垂直列表(Rails 3.2，bootstrap3)

Question

我正在构建一个日常交易应用程序来学习 Ruby on Rails。

我现在正在构建主页 View 。我希望它只是一个垂直的“卡片”列表(参见 https://www.intercom.com/blog/why-cards-are-the-future-of-the-web/ )，或者更简单地说，一个垂直的元素列表，每个元素都是一个带有灰色边框的水平矩形。

我是 Bootstrap 的新手，有很多可用的类。有没有一种我可以用于这些“卡片”，即使之后我必须覆盖它的一些 CSS？

这是我想要的那种“简单垂直矩形列表”的示例。

也许类“list-group-item”但是我的矩形都是分开的，就像你在图片中看到的那样(即它们没有相互接触)并且我需要在每个矩形上方有一个红色标题(即标题在矩形之外/元素)所以我不确定这是正确的选择。

Bootstrap 3 中的类是否更适合我想做的事情？

Answer 1

我的头顶是你吐出无序列表 ul > list-group-item > div > more div > 文本

我举了个例子。在这里结账 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;
}