AK47
  • 230

关于bootstrap4栅格布局

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

<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. 像这样的需求应该怎么实现
阅读 861
评论 更新于 2018-11-23
    1 个回答

    如果超过了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>
    评论 赞赏 2018-11-23
      撰写回答

      登录后参与交流、获取后续更新提醒