0

需求:
超大屏一行四个
大屏一行两个
小屏及手机一行一个
代码实现如下:

<div class="row">
   <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
   <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
   <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
   <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
</div>

疑问:

  1. row里面的总数不是要加起来等于12吗 我这边col-lg的加起来明显超过12了 col-sm col-xs也是,,这样不是不符合bootstrap要求了吗。
  2. 像这样的需求应该怎么实现
AK47 223
2018-11-23 提问
1 个回答
0

已采纳

如果超过了12个,就会排到下一行,比如两个col-lg-6就会在一行,你有四个,就会被分成两行.
col-xl-4那么就是一行三个,如果你要一行四个的话,应该用col-xl-3

<div class="row">
  <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
  <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
  <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
  <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
</div>

撰写答案

推广链接