我正在建立一个每日交易应用程序来学习
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: 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;
}
