自举网格 3x3 到 6x2 到 9x1

Question

是否有可能以及如何为 md 列创建一个 3x3 的引导网格。 6x2 用于 sm 列，9x1 用于 xs 列？

3x3 到 9x1 似乎很容易。

<div class='container-fluid'>
    <div class='row'>
        <div class='col-xs-12 col-md-4'>1</div>
        <div class='col-xs-12 col-md-4'>2</div>
        <div class='col-xs-12 col-md-4'>3</div>
    </div>
    <div class='row'>
        <div class='col-xs-12 col-md-4'>4</div>
        <div class='col-xs-12 col-md-4'>5</div>
        <div class='col-xs-12 col-md-4'>6</div>
    </div>
    <div class='row'>
        <div class='col-xs-12 col-md-4'>7</div>
        <div class='col-xs-12 col-md-4'>8</div>
        <div class='col-xs-12 col-md-4'>9</div>
    </div>
</div>

但我不知道如何在两者之间创建 6x2。

Answer 1

您可以将所有这些列放在一行中。 只需将 col-sm-6 添加到每个 div，第三列将自动移至下一行。 你基本上已经在为 xs-size 做类似的事情了。 在所有这些列周围保留一行，以便它们周围的样式保持不变。

Answer 2

试试这个看看是否有帮助。
查看此 large view Fiddle 并调整其大小以了解 Bootstrap 的工作原理。

   <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 bg-orange block clear">6 x 6 <br> These will stay like this all the way down to xs size</div>
      <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 bg-primary block clear"></div>

      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 bg-orange block clear">3 x 3</div>
      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 bg-primary block clear"></div>  

      <div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">  
      <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 bg-orange block clear"> 6 x 2</div>
      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 bg-primary block clear"></div>
      </div>

      <div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">  
      <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9 bg-orange block clear">9 x 9</div>
      <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 bg-primary block clear"></div>
      </div>

      <div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">  
      <div class="col-lg-6 col-md-3 col-sm-6 col-xs-9 bg-orange block clear">6 x 6 lg then change to 3 x 3 at md, then change to 6 x 2 at sm and then change at xs to 9 x 1.</div>
      <div class="col-lg-6 col-md-3 col-sm-2 col-xs-1 bg-primary block clear"></div>
      </div>

Answer 3

unska 试试这个 HTML

<div class='container-fluid'>
    <div class='row'>
        <div class='col-xs-12 col-md-4 col-sm-2 gray'>1</div>
        <div class='col-xs-12 col-md-4 col-sm-2 gray-l'>2</div>
        <div class='col-xs-12 col-md-4 col-sm-2 gray'>3</div>
        <div class='col-xs-12 col-md-4 col-sm-2 gray-l'>4</div>
        <div class='col-xs-12 col-md-4 col-sm-2 gray'>5</div>
        <div class='col-xs-12 col-md-4 col-sm-2 gray-l'>6</div>
        <div class='col-xs-12 col-md-4 col-sm-2 gray'>7</div>
        <div class='col-xs-12 col-md-4 col-sm-2 gray-l'>8</div>
        <div class='col-xs-12 col-md-4 col-sm-2 gray'>9</div>
        <div class='col-xs-12 col-md-4 col-sm-2 gray-l visible-sm'>10</div>
        <div class='col-xs-12 col-md-4 col-sm-2 gray visible-sm'>11</div>
        <div class='col-xs-12 col-md-4 col-sm-2 gray-l visible-sm'>12</div>
    </div>
</div>

css

.gray{background-color:#ccc}
.gray-l{background-color:#ececec}

Check this fiddle