拉伸div到它的全宽

Question

我正在使用bootstrap类和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>

P.S我已经导入了所有必要的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