如何使用bootstrap div设计rowspan？

Question

如何使用bootstrap设计网格系统？

在大中型显示屏中,它将显示2列和3行.第一列将具有1个单元格,第二列将具有3个单元格.

在小型和超小型显示器中,它将仅显示1列和4行.每个单元格将在一列中一个接一个地堆叠.来自大型或中型显示器的第一列/单元应首先出现在此处.

Answer 1

试试这个:

DEMO

       <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    First Column, First Cell
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    Second Column, First Cell
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    Second Column, Second Cell
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    Second Column, Third Cell
                </div>
            </div>
        </div>

Answer 2

Jake745的答案是正确的，但是错过了嵌套列的“行” div。您不能没有一列就没有行，因此最好保持该结构。另外，如果您需要将所有屏幕尺寸都扩展为12或任何尺寸，则无需重复此列。也就是说，如果您需要移动设备占用12列，而平板电脑则需要占用6列，则只需输入“ col-xs-12 col-sm-6”，而sm之上的任何内容将始终自动占用6列。

这样，您将减少代码，而不会放入不必要的代码。希望对您有所帮助。

   <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-6">
                First Column, First Cell
        </div>
        <div class="col-xs-12 col-sm-12 col-md-6">
            <div class="row">
               <div class="col-xs-12">
                Second Column, First Cell
               </div>
               <div class="col-xs-12">
                Second Column, Second Cell
               </div>
               <div class="col-xs-12">
                Second Column, Third Cell
               </div>
           </div>
        </div>
    </div>