【问题标题】：Why bootstrap 4 row doesn't expand to full available width?为什么引导程序 4 行不能扩展到完整的可用宽度？
【发布时间】：2021-10-21 23:19:24
【问题描述】：
据我了解，flexbox 在宽度上填充了可用空间。
我多次检查了该行，我真的不明白为什么它没有填满所有可用空间的宽度。这是 display flex + 这里没什么奇怪的。正如您所看到的，chrome 告诉您有很多可用空间可以填充。
在这一行 div 之前，我创建了另一个 div，但只有 d-flex 和 background-red；它工作正常并填充了所有可用的宽度空间。虽然这一行不这样做。问题是为什么？
我也在网上搜索了答案，但没有找到任何答案。
<div class="container">
<div class="row justify-content-md-center">
<div class="col-10 pb-2 text-justify news_content">
test
</div>
</div>
</div>
https://jsfiddle.net/g1xLhz6r/
【问题讨论】：
标签：
html
css
twitter-bootstrap
bootstrap-4
【解决方案1】：
将引导类 .container 更改为 .container-fluid 并将类 .col-10 更改为 .col 会得到您描述的结果。请记住，.col-10 表示使用 12 个可用列中的 10 个，因此在该 div 的任一侧放置一个 1 列空间。
.news_content {
background: yellow;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid"><!-- Change to container-fluid -->
<div class="row justify-content-md-center">
<div class="col pb-2 text-justify news_content">
test
</div>
</div>
</div>
您也可以从外部div 中删除.container 或.container-fluid 类，并将引导类no-gutters 添加到具有row 类的div 中，如图所示（您仍然需要使用@ 987654335@ 而不是.col-10):
.news_content {
background: yellow;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div><!-- removed class = container -->
<div class="row no-gutters justify-content-md-center"><!-- added no-gutters -->
<div class="col pb-2 text-justify news_content">
test
</div>
</div>
</div>
no-gutters