共被编辑 2 次

版本 更新时间 贡献者 编辑原因 操作
#r2 2018-11-23 XYShaoKang2217 添加代码块的标识为`html` 查看

关于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. 像这样的需求应该怎么实现
#r1 2018-11-23 AK47230 创建问题 查看

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