Html 我应该使用哪个 bootstrap 3 类来创建项目/“卡片”的垂直列表（Rails 3.2，bootstrap3）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18937307/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Which bootstrap 3 class should I use to create vertical list of items / "cards" (Rails 3.2, bootstrap3)
提问by Mathieu
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 https://www.intercom.com/blog/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.
我现在正在构建主页视图。我希望它只是一个垂直的“卡片”列表（参见https://www.intercom.com/blog/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.
这是我想要的“简单垂直矩形列表”类型的示例。
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 中的课程是否有更好的匹配？
采纳答案by Kuntau
What on top of my head is you spit out unordered list ul> list-group-item> div> more div> text
我的头顶是你吐出无序列表ul> list-group-item> div> 更多div> 文字
I made an example. checkout here https://jsfiddle.net/kuntau/X5Wvn/
我做了一个例子。在这里结帐https://jsfiddle.net/kuntau/X5Wvn/
HTML
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
CSS
.list-group li {
list-style: none;
}
.panel-info, .panel-rating, .panel-more1 {
float: left;
margin: 0 10px;
}
回答by Taz
How about using panel with headingand grid systemto 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: https://jsfiddle.net/bostaf/eqn93g6j/. Resize the viewport to see responsiveness in action.
检查这个小提琴：https: //jsfiddle.net/bostaf/eqn93g6j/。调整视口大小以查看响应速度。
