css - bootstrap 2.3 流体行间距

Question

我正在尝试创建一行 div(一周中的每一天一个)，每个 div 都包含一组按钮，用于表示用户在该时间段的可用性。但是，无论我尝试什么，我都无法让 Bootstrap 网格均匀地隔开它。由于有 7 天，我无法平均划分 12 个空间的跨度，所以每个 div 都是 span1。然而，在 Bootstrap 文档中，他们显示这均匀地填充了可用空间。在我的例子中，它总是把 div 挤到左边，所以所有东西都被挤得水泄不通，而不是占用可用空间。

我这里有一个 fiddle :http://jsfiddle.net/usrwvreL/

有人可以指出使用网格/流体行适当间隔这些元素的正确方法吗？

Answer 1

我发现面对此类挑战时，击败网格系统的一种简单方法是利用嵌套行。创建三列大小为 4 的列，在其中您可以创建三列，每列四列。

在第一个父列中，您可以有两个子列。第一个子列将使用 .col-size-offset-4 进行偏移，然后使用 .col-size-4 进行偏移。

中心父列将具有三个大小为 4 的子列，最后一个父列将具有两个大小为 4 的子列。

<!--This is the parent row-->
<div class="row">

    <!--This is a parent column-->
    <div class="col-md-4">

        <!--Here is the gold. Create nested rows-->
        <div class="row">

            <!--Here we are offseting this column to produce a centered effect-->
            <div class="col-md-offset-4">

            </div>

            <div class="col-md-4">

            </div>

        </div>

    </div>

    <!--The middle parent column-->
    <div class="col-md-4">

        <div class="row">

            <div class="col-md-4">

            </div>

            <div class="col-md-4">

            </div>

            <div class="col-md-4">

            </div>

        </div>

    </div>

    <!--The last parent column, farthest to the right
    <div class="col-md-4">

        <div class="row">

            <div class="col-md-4">

            </div>

            <div class="col-md-4">

            </div>

            <div class="col-md-4">

            </div>

        </div>

    </div>

</div>