少于 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 那样响应......

Answer 2

简答：不是真的也许吧？

From Grid description:

Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.

选择数字 12 是因为它的多功能性（您可以有：1、2、3、4、6 或 12 列），但这种解决方案总是有一些警告：它们需要符合其标准。

现在，当您像这样创建 7 个 div 时会发生什么：<div class="col-md-1">？我做了一个快速测试，我有 7 列。当然，它们只占我容器宽度的 7/12 - 所以如果这是可以接受的，那么你可以使用它。

如果没有，您要么必须使用自己的解决方案（利用现有的引导程序类或从空白开始），修改引导程序（可能，但我建议不要这样做，因为它会给未来的可维护性带来问题），或者改变你的设计。或者也许只是使用其他一些组件/模板？

Answer 3

为什么不把 7 加倍到 14？将其保持为偶数要简单得多。这样，您可以创建一个最多添加 7 列的布局。因此，例如，如果您想要 col-3 和 col-4 布局，则只需执行 col-6 和 col-8。对于日历，这意味着每天都会有一个 col-2 类。

还可以查看https://github.com/zirafa/bootstrap-grid-only，它可能比 Bootstrap 的 mixins 更容易理解，不过您始终可以转到 Bootstrap 自定义页面并输入您想要的列数：http://getbootstrap.com/customize/