html - Bootstrap 列未正确嵌套

Question

我正在尝试使用 Bootstrap 制作一个简单的降临节日历(现在是季节)。对于每周 7 天，我每行嵌套 7 列。

<div class="container-fluid">
    <div class="row title">
        <div class="col-xs-12"><p>Advent Calendar</p></div>
    </div>
    <div class="row weekdays">
        <div class="col-xs-1"><p>Mon</p></div>
        ...
        <div class="col-xs-1"><p>Sun</p></div>
    </div>

    <div class="row dates">
        <div class="col-xs-1"><p>30</p></div>
        <div class="col-xs-1"><p>1</p></div>
        ...
        <div class="col-xs-1"><p>6</p></div>
    </div>
</div>

参见 this fidlle为结果。

不幸的是，列利用的总大小是 7/12，而不是 12/12:它们没有使用视口(viewport)的整个宽度。 Bootstrap 不应该处理比例吗？如何让它们使用 100% 的宽度？

Answer 1

使用此工具自定义您的 Bootstrap http://getbootstrap.com/customize/#grid-system

在网格系统部分，您可以为 @grid-columns 设置 14 而不是 12，那么您自定义的 Bootstrap 将是 14 列，然后使用 col-xs-2而不是 col-xs-1 在你的每一天的 html 代码中，那么你的日历就有了完整的页面宽度。