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

发布时间:2020-08-29 发布网站:编程之家
编程之家收集整理的这篇文章主要介绍了twitter-bootstrap – 桌面上的3列到平板电脑上的2列编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用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/

总结

以上是编程之家为你收集整理的twitter-bootstrap – 桌面上的3列到平板电脑上的2列全部内容,希望文章能够帮你解决twitter-bootstrap – 桌面上的3列到平板电脑上的2列所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入编程之家官方QQ群:1065694478