为什么 col-xs-0 占用 100% 的行宽？答案

【问题标题】：Why is col-xs-0 taking 100% of the row width?为什么 col-xs-0 占用 100% 的行宽？
【发布时间】：2020-03-28 05:59:30
【问题描述】：

我的 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），而红色的容器在下方..有什么想法吗？

谢谢！

【问题讨论】：

首先col-xs-0类真的存在吗？
col-xs-0 什么都不是，如果你想隐藏在 xs 上，请使用 .d-xs-none
谢谢！但这里它说 col-xs 也应该工作？ getbootstrap.com/docs/3.3/examples/grid
您必须在引导程序 3 中的“col-xs”之后添加一个介于 1 和 12 之间的数字（假设您使用 12 列网格）才能正常工作。如果你想隐藏某些东西，你必须使用隐藏类或可见类
现在一切都清楚了，非常感谢！

标签： html css twitter-bootstrap grid

【解决方案1】：

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

因此，类使用以下格式命名：

.d-{value} 用于 xs .d-{breakpoint}-{value} 用于 sm、md、lg 和 xl。其中 value 是以下之一：

none inline inline-block block table table-cell table-row flex 内联灵活

【讨论】：