Question

有时候它会很完美，有时我会遇到以下问题......

我可以这样写吗？

<div class="container">
   <div class="row">
      <div class="col-md-4">
         Testing ...
      </div>
       <div class="col-md-4">
         Testing ...
      </div>
       <div class="col-md-4">
         Testing ...
      </div>
       <div class="col-md-4">
         Testing ...
      </div>
   </div>
</div>

或者我必须分开每一行＆＃34;行＆＃34;？

<div class="container">
       <div class="row">
          <div class="col-md-4">
             Testing ...
          </div>
           <div class="col-md-4">
             Testing ...
          </div>
           <div class="col-md-4">
             Testing ...
          </div>
       </div>
    </div>

   <div class="container">
       <div class="row">
          <div class="col-md-4">
             Testing ...
          </div>
       </div>
    </div>

在我当前的项目中浮动发生错误，以便最后一列没有正确的边距。

Answer 1

您可以使用较小的单位而不是较大的单位，即.col-md-3而不是.col-md-6或使用流畅的布局。

＆＃13;

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css");

＆＃13;

<div class="container-fluid">
  <div class="row-fluid">
    <div class="container-fluid">
      <div class="col-md-4">
        <div class="row-fluid">
          <div class="container-fluid">
            <div class="col-md-4">
              <div class="row-fluid">
                <div class="container-fluid">
                  Col
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="row-fluid">
                <div class="container-fluid">
                  Col
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="row-fluid">
                <div class="container-fluid">
                  Col
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="row-fluid">
          <div class="container-fluid">
            <div class="col-md-4">
              <div class="row-fluid">
                <div class="container-fluid">
                  Col
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="row-fluid">
                <div class="container-fluid">
                  Col
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="row-fluid">
                <div class="container-fluid">
                  Col
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="row-fluid">
          <div class="container-fluid">
            <div class="col-md-4">
              <div class="row-fluid">
                <div class="container-fluid">
                  Col
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="row-fluid">
                <div class="container-fluid">
                  Col
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="row-fluid">
                <div class="container-fluid">
                  Col
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="row-fluid">
                <div class="container-fluid">
                  Col
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

你的第一个例子完全按照应有的方式做出反应。每当你有超过12个cols时，有问题的cols会下降到下一行（而不是.row，这是不同的）。因为你有16个cols，所以最后一组4个坐在下一行。

要在单个可见行上放置16个部分（同样不是.row），您需要像这样嵌套列：

http://www.bootply.com/2VfLJXjcXt

<div class="container">
  <div class="row">

    <div class="col-md-3">
        <div class="row">
          <div class="col-md-3">
            Test1
          </div>
            <div class="col-md-3">
            Test2
          </div>    
          <div class="col-md-3">
            Test3
          </div>
            <div class="col-md-3">
            Test4
          </div>    
        </div>
    </div>
    <div class="col-md-3">
        <div class="row">
          <div class="col-md-3">
            Test5
          </div>
            <div class="col-md-3">
            Test6
          </div>    
          <div class="col-md-3">
            Test7
          </div>
            <div class="col-md-3">
            Test8
          </div>    
        </div>
    </div>
        <div class="col-md-3">
        <div class="row">
          <div class="col-md-3">
            Test9
          </div>
            <div class="col-md-3">
            Test10
          </div>    
          <div class="col-md-3">
            Test11
          </div>
            <div class="col-md-3">
            Test12
          </div>    
        </div>
    </div>
    <div class="col-md-3">
        <div class="row">
          <div class="col-md-3">
            Test13
          </div>
            <div class="col-md-3">
            Test14
          </div>    
          <div class="col-md-3">
            Test15
          </div>
            <div class="col-md-3">
            Test16
          </div>    
        </div>
    </div>

Bootstrap超过12个单位

2 个答案: