bootstrap 2.3 流体行间距答案

【问题标题】：bootstrap 2.3 fluid row spacingbootstrap 2.3 流体行间距
【发布时间】：2015-04-12 12:36:06
【问题描述】：

我正在尝试创建一行 div（一周中的每一天），每个 div 包含一组按钮，用于用户在该时间段内的可用性。但是，无论我尝试什么，我都无法让 Bootstrap 网格均匀分布。由于有 7 天，我无法将 12 空间跨度均分，因此每个 div 为span1。但是，在 Bootstrap 文档中，他们显示这均匀地填充了可用空间。在我的示例中，它总是将 div 挤在左边，所以一切都变得狭窄而不是占用可用空间。

我这里有个小提琴：http://jsfiddle.net/usrwvreL/

有人可以指出使用网格/流体行适当地分隔这些项目的正确方法吗？

【问题讨论】：

最终，“正确”的解决方案是将网格自定义为 7 列或 14 列。如果您可以切换到 bootstrap 3，这可以在 bootstrap 网站上使用他们的customization page 完成。
@Ted--不幸的是，我现在被 Bootstrap 2.3.2 困住了，否则这将是一个更简单的问题。
说实话，在不升级 Bootstrap 的情况下，我能想到的唯一方法是将每列设置为 14.2857142857143% 宽度，这将完全绕过 Bootstrap 的网格......
@jsaive-- 手动设置宽度使 div 垂直堆叠而不是水平间距。

标签： css twitter-bootstrap twitter-bootstrap-2

【解决方案1】：

Bootstrap 使用 12 格网格系统，因此如果您需要除以 7，您可以添加自定义网格划分，

这样你就可以制作像.col-seventh{width: calc (100% / 7)}这样的选择器

扩展您可以创建新的网格类型：

 .col-seventh-1{width: 14.285714%;}
 .col-seventh-2{width: 28.571428%;}
 .col-seventh-3{width: 42.857142%;}
 .col-seventh-4{width: 57.142857%;}
 .col-seventh-5{width: 71.428571%;}
 .col-seventh-6{width: 85.714285%;}
 .col-seventh-7{width: 100%;}

相反，您也可以使用flexboxes css3 属性布局（非引导程序）为您完成所有这些！

【讨论】：

【解决方案2】：

我发现在面对此类挑战时击败网格系统的一种简单方法是利用嵌套行。创建三个大小为 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>

【讨论】：

【解决方案3】：

我只是想知道将日期放在单独的行上可能是一个很好的解决方案。这样您只需将 btn 组与 6 个 btns 对齐。

【讨论】：

您介意进一步解释或提供示例吗？谢谢

【解决方案4】：

您为什么不尝试更改布局。例如，您可以每行显示三个时间按钮。日期将在最上面一行，但它可以居中对齐，其他带有时间的按钮也可以居中。

【讨论】：

【解决方案5】：

为什么不能这样放？

<div class="container-fluid">
     <div class="span1 avail-buttons"><span class="avail-date text-center">2015-02-11</span>
    <div class="button-row row-fluid">       
            <button data-slot="0" type="button" class="avail-button btn btn-danger">08:45 AM</button>
            <button data-slot="1" type="button" class="avail-button btn btn-danger">09:15 AM</button>
            <button data-slot="2" type="button" class="avail-button btn btn-danger">09:45 AM</button>
            <button data-slot="3" type="button" class="avail-button btn btn-danger">10:15 AM</button>
            <button data-slot="4" type="button" class="avail-button btn btn-danger">10:45 AM</button>
            <button data-slot="5" type="button" class="avail-button btn btn-danger">11:15 AM</button>
        </div> </div></div>

【讨论】：