html – 我应该使用哪个bootstrap 3类来创建项目/“卡”的垂直列表(Rails 3.2,bootstrap3)

我正在建立一个每日交易应用程序来学习 Ruby on Rails.

我正在构建主页视图.我想它只是一个垂直的“卡”列表(见http://insideintercom.io/why-cards-are-the-future-of-the-web/),或者更简单地说,一个垂直的元素列表,每个元素是一个带有灰色边框的水平矩形.

我是新来的bootstrap,有这么多的课程可用.
有没有一个我可以用于这些“卡”,即使我必须覆盖一点点的css之后？

这是我想要的“简单垂直矩形列表”的一个例子.

也许类“list-group-item”,但我的矩形都是分开的,如你在图片中看到的(即他们没有互相接触),我需要在每个矩形之上的一个红色标题(即标题在矩形/项目之外),所以我’我不知道这是正确的选择.

在引导3中有什么比较好的匹配我想做什么？

解决方法

你的头顶上吐出无序列表>列表组项目> div>更多div>文本

我举个例子结帐在这里http://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: [phone]</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;
}

原文地址：https://www.jb51.cc/html/229646.html