将 div 拉伸到全宽

Question

我正在使用引导类和 div 来制作 2 个 div，如下图所示。上面的 div，带有图标的那个不会像下面的 div 一样拉伸到屏幕的末尾。我究竟做错了什么？另外，请注意，在任何情况下，我都必须像现在一样将我的图标放在 div 的中间。这是我的 CSS 和 HTML 代码：

CSS：

.icons_div
{
  margin: 0px auto;
  width: max-content;
}

.icon
{
  margin: 0px auto;
  width: 15px;
  display: initial;
}

.fa
{
  padding: 0px 10px;
}

HTML：

<div class="container-fluid">
    <div class="icons_div">
        <div class="row bg-secondary">
            <div class="col-sm-2"> 
                <div class="icon">
                    <i class="fa fa-circle"> </i>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="icon"> <i class="fa fa-circle"> </i></div>
            </div>
            <div class="col-sm-2">
                <div class="icon"><i class="fa fa-globe"> </i> </div>
            </div>
            <div class="col-sm-2"> <div class="icon"><i class="fa fa-search"> </i> </div> </div>
            <div class="col-sm-2"> <div class="icon"><i class="fa fa-home"> </i> </div> </div>
            <div class="col-sm-2"> <div class="icon"><i class="fa fa-trash"> </i> </div> </div>
        </div>
    </div>
    <div class="row">
        <div class="col bg-dark" style="height: 40px;"></div>
    </div>
</div> <br> <br>

PS 我已经导入了所有必需的 Bootstrap 4 库，所以这不是问题

Answer 1

删除.icons_div 类的整个样式。 max-content根据div里面的内容调整div的宽度。所以它使 div 更小。还将row 类添加到具有icons_div 类的div。

<div class="row icons_div">

在此处了解更多信息https://developer.mozilla.org/en-US/docs/Web/CSS/max-width