Question

Is it even possible and how can I create a bootstrap grid that's 3x3 for md columns. 6x2 for sm columns and 9x1 for xs columns?

3x3 to 9x1 seems to be easy.

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

But I can't figure out how to create the 6x2 in between.

Answer 1

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

Answer 2

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

Answer 3

试试看它是否有帮助。
查看此 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>

Bootstrap grid 3x3 to 6x2 to 9x1

3 个答案: