Question

您好我已将我的引导程序定制为16个列。它工作得很好但是..我有一个容器有1列4，其他列是12.我的问题是当我在12列中构建列时我可以用16colums再次构建..我不想要那个，我想要12列在12列中。

<div class="col-sm-4 well"></div>
<div class="col-sm-12 well">
    <!-- Blocks -->
    <div class="col-sm-4 menu-blocks"></div>
    <div class="col-sm-4 menu-blocks"></div>
    <div class="col-sm-4 menu-blocks"></div>
    <div class="col-sm-4 menu-blocks"></div>
    <!-- I want it to be 4x3. I am building on a 16grid column. -->
</div>

Answer 1

这在您的实施中如何看待？将它包装在一排＆＃39; div可能会使12个cols填满。

svn update

EDIT =编辑对应OP的编辑

Answer 2

如果您使用4列4个区块，请将<div class="col-sm-12 well">更改为<div class="col-sm-16 well">。

此外，你不能做你所说的，因为你不能有一个块的宽度为8.33％（100/12）和6.25％（100/16）的实现。它必须是一个或另一个。

或者，您可以使用此实现：

<div class="col-sm-3 well"></div>    <!-- column with 25% width -->
<div class="col-sm-12 well">         <!-- column with 75% width -->
    <!-- Blocks -->
    <div class="row">
        <div class="col-sm-3 menu-blocks"></div>
        <div class="col-sm-3 menu-blocks"></div>
        <div class="col-sm-3 menu-blocks"></div>
        <div class="col-sm-3 menu-blocks"></div>
    </div>
</div>

<div class="row"></div>很重要。

这里有一个较大列内的网格，两种情况下网格都是12个块。要拥有4x3网格，您必须拥有三行。

请记住，3和12是Bootstrap块的数量，它们是相对于行（<div class="row"></div>），而不是外部容器。

Answer 3

一旦将其自定义为16，就无法将其更改回12个。在16 col网格中最接近全宽3 cols宽的将使用3 col-*-5（3x5 = 15）然后偏移第一列..

<div class="row">
       <div class="col-sm-4"></div>
       <div class="col-sm-12">
            <div class="row">
              <div class="col-sm-5 col-sm-offset-1 menu-blocks">
                1
              </div>
              <div class="col-sm-5 menu-blocks">
                2
              </div>
              <div class="col-sm-5 menu-blocks">
                3
              </div>
          </div>  
     </div>
</div>

http://bootply.com/cPh1u6UGmq

这是Bootstrap使用12列网格的一个完美示例。它可以平均分为两半，三分之一或四分之一。 16个工作用于宿舍和一半，但不是三分之一。

Bootstrap 16列，12列

3 个答案: