Twitter-Bootstrap的动态行长
Twitter-Bootstrap的动态行长
提问于 2012-06-02 15:52:42
我正在创建样机，其中的内容将看起来像一块板，有点像Pinterest。我正在使用Twitters-Bootstrap，并且在布局方面有一些问题。
我有一个动态数量的元素，所以我想我可以只有一行，然后项目就会换行到下一行。然而，这在内容跨度之间创造了一些奇怪的空间(见下图)。
我不是设计师，所以我的问题是，如果有一种方法可以使用单行显示所有的内容块，还在使用fluid设计吗？
另一种方法是以编程方式添加行，但这似乎是样式表而不是业务逻辑应该解决的问题。
代码如下所示：
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<li class="span3 pdt10">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
<div class="caption">
<h5>
Thumbnail label</h5>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi
porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>
<a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
</div>
</div>
</li>
<li class="span3 pdt10">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
<div class="caption">
<h5>
Thumbnail label</h5>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi
porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>
<a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
</div>
</div>
</li>
<li class="span3 pdt10">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
<div class="caption">
<h5>
Thumbnail label</h5>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi
porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>
<a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
</div>
</div>
</li>
<li class="span3 pdt10">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
<div class="caption">
<h5>
Thumbnail label</h5>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi
porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>
<a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
</div>
</div>
</li>
<li class="span3 pdt10">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
<div class="caption">
<h5>
Thumbnail label</h5>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi
porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>
<a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
</div>
</div>
</li>
</div>
</div>
回答 1
Stack Overflow用户
回答已采纳
发布于 2012-06-02 16:47:09
将CSS属性nth-child用于媒体查询，以删除每行第一个元素的左边距-
.myclass > li:nth-child(4n+1) {
margin-left: 0px;
}这里解释了媒体查询http://twitter.github.com/bootstrap/scaffolding.html
并且在Twitter Bootstrap中也使用了第n-child。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10860727
复制相关文章
相似问题
腾讯云开发者
