Question

我正在尝试使用Bootstrap创建一个简单的Advent日历（'tis the season）。我每周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：它们没有使用视口的整个宽度。不是bootstrap应该照顾比例？如何让它们使用100％的宽度？

Answer 1

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

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

Bootstrap列未正确嵌套

1 个答案: