twitter-bootstrap – 桌面上的3列到平板电脑上的2列

发布时间：2020-12-17 20:37:47 所属栏目：安全来源：网络整理

导读：我正在使用bootstrap 3并尝试显示多行,每行包含3个框.所有盒子都是相同的尺寸,因此非常均匀.您可以将其描绘为网格.在平板电脑上我只想要两列. div class="row" div class="col-sm-6 col-md-4" Uniform box of content here /div div class="col-sm-6 col-md-

我正在使用bootstrap 3并尝试显示多行,每行包含3个框.所有盒子都是相同的尺寸,因此非常均匀.您可以将其描绘为网格.在平板电脑上我只想要两列.

<div class="row">
   <div class="col-sm-6 col-md-4"> Uniform box of content here </div>
   <div class="col-sm-6 col-md-4"> Uniform box of content here </div>
   <div class="col-sm-6 col-md-4"> Uniform box of content here </div>
</div>

<div class="row">
   <div class="col-sm-6 col-md-4"> Uniform box of content here </div>
   <div class="col-sm-6 col-md-4"> Uniform box of content here </div>
   <div class="col-sm-6 col-md-4"> Uniform box of content here </div>
</div>

现在,这在我的桌面上运行良好.在移动设备上,它们都会根据需要折叠成一列.在平板电脑上,它们都分为两个单元.但是,问题是我的列数不均匀,分成偶数列.这会留下一行2,然后是一行1.然后下一行创建一行2,后跟一行1.

是否有任何简单的方法可以让下一行“弹出”以在平板电脑上完成两列的行,同时在桌面上保留3列？就目前而言,我的平板电脑上每隔一行都有空列.

解决方法

不要将它们分成不同的行,它应该按照你描述的方式行事……

<div>
   <div class="col-sm-6 col-md-4"> Uniform box of content here </div>
   <div class="col-sm-6 col-md-4"> Uniform box of content here </div>
   <div class="col-sm-6 col-md-4"> Uniform box of content here </div>
   <div class="col-sm-6 col-md-4"> Uniform box of content here </div>
   <div class="col-sm-6 col-md-4"> Uniform box of content here </div>
   <div class="col-sm-6 col-md-4"> Uniform box of content here </div>
</div>

小提琴… http://jsfiddle.net/gmU7w/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!