巅峰霸主 > 在线帮助文档 > bootstrap4.5文档 > Mix and match网格混合使用

bootstrap Mix and match网格混合使用详细方法

时间:2020-04-06 14:25:38  来源:bootstrap  作者:烈火大地 点击:
摘要:网格在不同断点上占用不同的网格数量,这会使得bootstrap的灵活性非常强,我们可以更具实际的需要使用断点来控制排版,并且这些都是响应式的,注意版本是4.4.1哦……

网格混合使用

不想让您的列简单地堆叠在某些网格层中?根据需要为每个层使用不同类的组合。请参阅下面的示例,以更好地了解所有工作原理。下面是实例代码。

<div class="container">
  <!-- 将一个完全宽和半宽(50%)的div在手机页面上堆叠在一起 -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- 列在移动设备上的宽度为50%,在桌面上的宽度为33.3% -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- 所有屏幕上均显示2列 -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

上面代码在大于md(≥768px)的屏幕上执行后显示为下图1所示,第一个row中第4行代码class="col-md-8"代表在大于md(≥768px)的屏幕上占用8个网格,而第5行div中col-md-4表示在md(≥768px)的屏幕上占用4个网格,所以在大于等于md的屏幕上执行class里面的md断点。第5行中col-6在大于md的屏幕上不执行。

同理,第9行row包含的div中,col-6是移动优先的写法,由于指定了断点col-md-4,由于横向每行总的网格数是12格,3个div在大于md的屏幕上正好是12格,此时col-6只有在小于md(768px)的屏幕上才执行。

第16行row中的2个div,由于没有指定断点(sm/md/lg/xl),只指定了所占网格的数量,每行总的12个网格,这里只有2个div,并且每个div锁定6个网格,所以2个div正好占满12格。

image.png

前面的代码中只使用了md这个断点,所以只需要搞清楚大于md和小于md的屏幕上如何展现就可以了。

image.png

将页面调整到小于md(<768px)的屏幕宽度上,如上图2所示。

第一个row中第4行代码div中class="col-md-8"只有一个md断点,由于此时页面宽度是小于md(768px)的屏幕,所以class="col-md-8"不生效,执行默认的每行12个网格,所以第4行这个div是占满全部12个网格的。

示例代码第5行的div中使用了col-6(col后没有指定断点),指定占12个网格中的6个,执行代码之后就是显示6个网格,即一半(6÷12=0.5=50%),剩下的50%没有写div容器,所以显示为空白。其中col-md-4是大于md(768px)屏幕上才生效,此时我截图中屏幕宽度是542px,所以不生效。

第9行代码row中的三个div,同理,此时屏幕宽度为542px,md断点不执行;第10行代码col-6指定了div的宽度占用6个网格,第11行也是占用6个网格,第10行和11行的两个div所占的网格刚好是12格(6+6=12),所以代码第12行的div就自动换到下一行,并且占用6个网格。

示例代码第16行row包含的2个div中,只指定了所占用的网格数没有指定断点,所以在所有的屏幕上都只执行所占的网格数量,代码第17行div占6个网格,第18行div也是占6个网格,由于这2个div所占的网格数加起来刚好占满12个网格,所以不论屏幕宽度是多少,我们看到的都是2个div平分12个网格且在同一行。

(责任编辑:陆柏熺)
评价:
用户名: 验证码: 看不清?点击更换


关注站长自媒体 获取更多优质内容

  • 百家号
    百家号
  • 头条号
    头条号
  • 企鹅号
    企鹅号

2019-2021 ©巅峰霸主网 京ICP备12023415号-2
返回
顶部