Question

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

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

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

Answer 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属性布局（非引导程序）来为您完成所有这些!!

Answer 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>

Answer 3

我只是想知道将日期放在单独一行上可能是一个很好的解决方案。所以你只需要将btn-group与6 btn对齐。

Answer 4

为什么不尝试更改布局。比方说你可以每行显示三个时间按钮。日期将位于最顶行，但它可以在中心对齐，其他按钮随时间也可以在中心。

Answer 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>

bootstrap 2.3流体行间距

5 个答案: