html - 为什么 col-xs-0 占据了 100% 的行宽?

标签 html css twitter-bootstrap grid

我的 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 像素(而不是 0 像素),红色容器在下方..有什么想法吗?

谢谢!

最佳答案

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

As such, the classes are named using the format:

.d-{value} for xs .d-{breakpoint}-{value} for sm, md, lg, and xl. Where value is one of:

none inline inline-block block table table-cell table-row flex inline-flex

关于html - 为什么 col-xs-0 占据了 100% 的行宽?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59158973/

相关文章:

javascript - 从我的 javascript 代码更改 div 样式

html - 如何将 "required"属性与 "radio"输入字段一起使用

css - 将绝对元素固定到位置静态最大宽度容器的边缘

html - 在页面上的表格下方添加空白

php - $_POST 和 $_GET 转换报价( ' ) to backslash + quote (\')

html - 纯 HTML 和 CSS 汉堡包菜单不起作用

html - 聊天框固定在最大宽度时不会扩展 <p>

html - 单击时应用媒体查询特定样式

css - 如何将 Bootstrap 3 的字形图标更改为白色?

javascript - 一页 Bootstrap 下拉菜单不适用于移动设备