Question

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

Answer 1

您最好的选择可能是创建自己的自定义列类。由于您想要一个跨越其父亲宽度1/7的列，请使用width:14.285%;（100除以7 = 14.285 ......）。

DEMO：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列），但总有一些警告要求：它们需要符合其标准。< / p>

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

如果没有，你要么必须使用你自己的解决方案（要么利用现有的bootstrap类，要么从空白开始），修改bootstrap（可能，但我建议反对，因为它会为将来的可维护性带来问题），或者改变你的设计。或者只是使用其他一些组件/模板？

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/

少于12列的bootstrap 3.0网格

3 个答案: