将 div 拉伸到全宽

Question

我正在使用 bootstrap 类和 div 制作 2 divs，如下图所示。上面的 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 class 的整个样式。 max-content 根据 div 中的内容调整 div 的宽度。所以它使 div 更小。还要将 row class 添加到具有 icons_div class.

的 div

<div class="row icons_div">

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

将 div 拉伸到全宽

Stretch a div to it's full width

html

css

frontend

web-frontend

bootstrap-4