我应该使用哪个bootstrap 3类来创建项目/“卡片”的垂直列表（Rails 3.2，bootstrap3）

I am building a daily deal app to learn Ruby on Rails.

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

I'm now building the home page view. I would like it to be simply a vertical list of "cards" (see http://insideintercom.io/why-cards-are-the-future-of-the-web/), or more simply put, a vertical list of elements with each one being a horizontal rectangle with a grey border.

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

I'm new to bootstrap and there are so many classes available. Is there one I could use for these "cards", even if I have to override a little of its css afterwards?

我是bootstrap的新手,有很多课程可供选择。有没有我可以使用这些“卡”,即使我之后必须覆盖一点css?

Here is an example of the kind of "simple vertical rectangle list" i'd like to have. 我应该使用哪个bootstrap 3类来创建项目/“卡片”的垂直列表（Rails 3.2，bootstrap3）

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

Maybe class "list-group-item" but my rectangles are all separated as you see in the picture (i.e they're not touching each other) and I need a red title above each rectangle (i.e the title is outside the rectangle/item) so I'm not sure it's the right choice.

也许类“list-group-item”但我的矩形都是如图所示分开的(即它们没有互相接触)我需要在每个矩形上方有一个红色标题(即标题在矩形/项目之外)所以我不确定这是正确的选择。

Is there a better match for the class in bootstrap 3 for what I want to do?

对于我想要做的事情,bootstrap 3中的类是否有更好的匹配?

2 个解决方案

#1

What on top of my head is you spit out unordered list > list-group-item > div > more div > text

最重要的是你吐出无序列表> list-group-item> div> more div> text

I made an example. checkout here http://jsfiddle.net/kuntau/X5Wvn/

我举了一个例子。结帐这里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: 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

How about using panel with heading and grid system to fully utilize responsiveness:

如何使用带有标题和网格系统的面板来充分利用响应能力:

<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>

With just a little bit of CSS to render vertical borders:

只需要一点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;
}

Check this fiddle: http://jsfiddle.net/bostaf/eqn93g6j/. Resize the viewport to see responsiveness in action.

检查这个小提琴:http://jsfiddle.net/bostaf/eqn93g6j/。调整视口大小以查看操作中的响应性。

#1