html - 为什么 col-xs-0 占用 100% 的行宽?
问题描述
我的 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 不存在,如果你想删除它
因此,这些类使用以下格式命名:
.d-{value} 用于 xs .d-{breakpoint}-{value} 用于 sm、md、lg 和 xl。其中 value 是以下之一:
无 inline inline-block block table table-cell table-row flex inline-flex
推荐阅读
- r - R Data.Table 重命名许多变量
- javascript - Bootstrap - 表格列宽大小不正确
- python - 如何在 matplotlib 中生成这些水平线?
- javascript - 如何设置使用发布请求打开页面的链接
- c++ - string_view 返回在 g++ 9.3.0 中损坏?
- r - 正则表达式从指定模式中提取所有文本,直到 r 中的字符串结尾
- ios - CollectionView reloadData() 奇怪的行为
- powerbi - 如何打破等级权力bi的关系
- wpf - 如何将样式应用于不同的“TextBlock”对象?
- python - 为什么 2D 分配在 Numpy 中不能按预期工作?