关于bootstrap4栅格布局

AK47
  • 237

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

<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. 像这样的需求应该怎么实现
回复
阅读 2k
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>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏