关于bootstrap4栅格布局

Question

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

<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. 像这样的需求应该怎么实现

Answer 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>