Question

我的Bootstrap容器如下所示：

<main >

<div class="row co-lg-12 col-md-12 col-xs-12">
  <div class="col-lg-1 col-md-1 col-xs-1" style="background-color:red; height: 100vh;"></div>

  <div class="col-lg-4 col-md-5 col-xs-0" style="background-color:blue; height: 100vh;">

  </div>

  <div class="col-lg-1 col-md-0 col-xs-0" style="background-color:green; height: 100vh;">      </div>

  <div class="col-lg-3 col-md-4 col-xs-10" style="background-color:yellow; height: 100vh;">

  </div>

  <div class="col-lg-3 col-md-1 col-xs-1" style="background-color:gray; height: 100vh;"></div>
</div>

</main>

在开发人员工具中对其进行检查时，它显示蓝色容器占据了100个屏幕（而不是0px），红色容器位于下面。.有什么想法吗？

谢谢！

Answer 1

col-xs-0不存在，如果要删除它

因此，这些类使用以下格式命名：
     xs的
.d- {value}。sm，md，lg和xl的d- {breakpoint}-{value}。   其中值是以下之一：

没有内联内联块块表table-cell table-row flex   内联弯曲

为什么col-xs-0占据行宽的100％？

1 个答案: