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

Question

我正在尝试使用只有 7 列的网格创建日历。我想让这 7 列均匀分布并适合整行。目前，7 列加起来不等于 12，我得到 12 列，其中 5 列是空的。 Bootstrap 3 中是否有办法让所有 7 个都分布在一行中？

Answer 1

您最好的选择可能是创建您自己的自定义列类。由于您想要一个跨越其父级宽度 1/7 的列，请使用 width: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 那样响应......