如何使用bootstrap设计网格系统?如何使用bootstrap div设计rowspan?
在大中型显示器中会显示2列和3行。第一列将有1个单元格,第二列将有3个单元格。
在小型和超小型显示器中,它只显示1列和4行。每个单元格将一个接一个堆叠在一个列中。来自大型或中型展示的第一列/单元格应该在这里首先出现。
如何使用bootstrap设计网格系统?如何使用bootstrap div设计rowspan?
在大中型显示器中会显示2列和3行。第一列将有1个单元格,第二列将有3个单元格。
在小型和超小型显示器中,它只显示1列和4行。每个单元格将一个接一个堆叠在一个列中。来自大型或中型展示的第一列/单元格应该在这里首先出现。
试试这个:
<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>
你可以窝在 “行”
<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>
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>
我在Bootstrap中使用了相同的'rowspan',但是我的内容被封装在'Kendo UI TabStrip'小部件中。我无法使rowspan工作。这里是一个Plunker样本,其中有一些文本内容在Kendo tabstrip中 - http://plnkr.co/edit/OE0VNbSkBHzmw1O4yLxC?p=preview – 2015-06-30 16:22:59
col-sm-12也是不必要的 – aProgger 2017-07-05 07:53:42
谢谢Jake745。这个解决方案正是我正在寻找的。 – Mousam 2014-09-05 14:46:16
欢迎Mousam :) – 2014-09-06 03:25:52