DEMO

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的回答是正确的，但错过了＆＃34; row＆＃34; div为嵌套列。您不能拥有没有行的列，因此维护该结构是很好的。此外，如果您需要将所有屏幕尺寸扩展到12或任何大小，则不需要重复该列。也就是说，如果你需要移动设备占用12列，而平板电脑以上占用6列，你只需要放置＆＃34; col-xs-12 col-sm-6＆＃34; 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>

Answer 3

你可以嵌套“行”

<div class = "row">
    <!-- first column-->
    <div class = "col-lg-12">
    ...your code here   
    </div>

    <!-- second column-->
    <div class = "col-lg-12">
        <div class = "row">
            <div class = "col-lg-6">
            .. your code cell 1
            </div>

            <div class = "col-lg-6">
            .. your code cell 2
            </div>
        </div>
    </div>
</div>

如何使用bootstrap div设计rowspan？

3 个答案:

DEMO