如何使用bootstrap“均匀”分配奇数列?

时间:2013-03-18 20:17:53

标签: html5 css3 twitter-bootstrap

我必须使用bootstrap响应式css显示日历(即7)的所有工作日均匀分布在12跨行中。

我试过了

<div class ="span12">
 <div class="span2"> Monday </div>
 .......
 ......
 <div class="span2"> Sunday </div>
</div>

这将超过12跨度并将最后一列包装到下一行。

任何人都知道这样做的正确方法是什么?

谢谢!

2 个答案:

答案 0 :(得分:2)

谢谢!我只是增加了.row-fluid span2的百分比宽度,并将其创建为一个单独的类。它奏效了!

.row-fluid .daySpan {
  width: 14.192978723404255%;
  *width: 14.192978723404255%;
}

答案 1 :(得分:1)

您需要使用自己的类而不是网格来设置自定义宽度。我可能会将它与现有的bootstrap网格类结合起来,以带来其边缘等。

不要忘记行div,它提供负左右边距。

http://jsfiddle.net/2n8Cx/1(仅适用于此演示中启用了响应的一个宽度范围。)

.span1.spanDays {width: 86px;}

<div class="span12">
  <div class="row">
    <div class="span1 spanDays"> Monday </div>
     .......
     ......
    <div class="span1 spanDays"> Sunday </div>
  </div>
</div>

http://twitter.github.com/bootstrap/scaffolding.html#gridSystem