引导列未正确嵌套

Question

我正在尝试使用 Bootstrap 制作一个简单的 Advent 日历（这是季节）。 我每周 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：它们没有使用视口的整个宽度。 引导程序不应该照顾比例吗？如何让它们使用 100% 的宽度？

Answer 1

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

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