css – Twitter Bootstrap – 排行问题

前端之家收集整理的这篇文章主要介绍了css – Twitter Bootstrap – 排行问题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用Twitter bootstrap构建一个网站(这是非常好的!).
我的布局使用:
<div class="row">
    <div class="span6"></div>
    <div class="span6"></div>
    <div class="span6"></div>
    <div class="span6"></div>
</div>

哪个工作很好,我每行有两个div,我们不必在我们的循环中包括一个计数器来摆脱利润.它是完美的!但是我们决定改变我们关于固定布局的想法,所以我从.row转换到了.这就是问题的到来.

我知道有这样的事情:

<div class="row-fluid">
    <div class="span6"></div>
    <div class="span6"></div>
    <div class="span6"></div>
    <div class="span6"></div>
</div>

而.span6的div与第一行相当,但是.span6上的margin-left从第二行开始出现,因此布局很好,不好.

我很惊讶,它对于固定的布局而言不是很流行,有没有解决这个问题?我在我所有的网站上使用这个,所以不得不添加所有的计数器将…太多的工作.

这是JS小提琴:
http://jsfiddle.net/denislexic/uAs6k/3/

任何帮助赞赏,谢谢.

解决方法

如果您知道每行的跨度数,则可以使用如下表达式:
.row-fluid [class*="span"]:nth-child(3n+1) {
   margin-left: 0;
}

例如:如果每行有3个跨度,则上述表达式将从每行的第一个跨度中移除余量.而下面的一个将删除每行上最后一个元素的margin-right:

.row-fluid [class*="span"]:nth-child(3n+3) {
    margin-right: 0;
}
原文链接:https://www.f2er.com/css/214427.html

猜你在找的CSS相关文章