加入收藏 | 设为首页 | 会员中心 | 我要投稿 PHP编程网 - 黄冈站长网 (http://www.0713zz.com/)- 数据应用、建站、人体识别、智能机器人、语音技术!
当前位置: 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

html – 使用多个bootstrap列大小的目的是什么?

发布时间:2021-01-02 02:23:28 所属栏目:资源 来源:网络整理
导读:我对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

我对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>

(编辑:PHP编程网 - 黄冈站长网)

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

    推荐文章
      热点阅读