我对Bootstrap很新,我理解Bootstrap如何使用12列网格.当我想利用Bootstrap网格时,我传统上这样做:
<div class="row"> <div class="col-md-6"> ... </div> <div class="col-md-6"> ... </div> </div>
我也理解不同的列大小用于不同的屏幕尺寸
<div class="row"> <div class="col-xs-6"> ... </div> <div class="col-xs-6"> ... </div> </div>
但是,我看到很多人做了类似的事情:
<div class="row"> <div class="col-xs-6 col-md-6 col-lg-6"> ... </div> <div class="col-xs-6 col-md-6 col-lg-6"> ... </div> </div>
为什么要使用多个色谱柱?浏览器会检测哪一个适合使用吗?
解决方法
在这个例子中绝对没有理由拥有所有三个类:
<div class="row"> <div class="col-xs-6 col-md-6 col-lg-6"> ... </div> <div class="col-xs-6 col-md-6 col-lg-6"> ... </div> </div>
它实际上与此相同:
<div class="row"> <div class="col-xs-6"> ... </div> <div class="col-xs-6"> ... </div> </div>
Bootstrap网格类适用于超出指定大小的所有尺寸,因此应用col-xs-6将导致该元素在任何更大的屏幕尺寸上也包含6列,例如sm,md等.我猜这是谁包括所有第一个示例中的三个类没有深入了解Bootstrap网格系统的工作原理.
如果您希望元素在不同的屏幕尺寸上具有不同的大小,则只需要包含多个类:
<div class="row"> <div class="col-xs-4 col-md-3 col-lg-2"> ... </div> <div class="col-xs-8 col-md-9 col-lg-10"> ... </div> </div>
原文地址:https://www.jb51.cc/html/227521.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。