我正在使用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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。