twitter-bootstrap-3 – 少于12列的bootstrap 3.0网格

我正在尝试使用仅有7列的网格创建日历.我希望这7列均匀分布并适合整行.目前,7列不添加12列,我得到12列,其中5列为空. Bootstrap 3中是否有一种方法可以将所有7个分布在整行中？

解决方法

您最好的选择可能是创建自己的自定义列类.因为你想要一个跨越其父级宽度的1/7的柱子,所以使用宽度：14.285％; (100除以7 = 14.285 ……).

演示：http://www.bootply.com/uakh14tkuX

CSS

.col-day{
    width:14.285%;
    border:1px solid grey;
    float:left;
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
  }

HTML

<div class="container">
  <div class="row bg-success">
    <div class="col-day">Sun</div>
    <div class="col-day">Mon</div>
    <div class="col-day">Tue</div>
    <div class="col-day">Wed</div>
    <div class="col-day">Th</div>
    <div class="col-day">Fr</div>
    <div class="col-day">Sat</div>
    <div class="col-day">Sun</div>
    <div class="col-day">Mon</div>
    <div class="col-day">Tue</div>
    <div class="col-day">Wed</div>
    <div class="col-day">Th</div>
    <div class="col-day">Fr</div>
    <div class="col-day">Sat</div>
  </div>
</div>

在CSS部分中,float,position,min-height和paddings与任何其他bootstrap col-class相同.宽度和边框是唯一真正的自定义方面.但是你也想考虑在不同大小的设备上发生了什么 – 这个解决方案没有响应组合col-classes的方式……