Html 使用div绘制空水平条

我想画两个div，如下面的线框示例所示。后一个（黑条）没有内容。如何使用Bootstrap 4绘制这两个div

以下是我在这方面的努力：

<div class="icons_div">
  <div class="row">
    <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> <br> <br>

HTML:

重试的输出：

---

在这种情况下，您只需将

bg secondary

类添加到第一行，使其具有灰色背景色，然后在下面创建第二行-列对，并将

bg dark

添加到空列以及

style=“height:40px；”

以提供所需的高度

代码如下：

---

在这种情况下，您只需将

bg secondary

类添加到第一行，使其具有灰色背景色，然后在下面创建第二行-列对，并将

bg dark

添加到空列以及

style=“height:40px；”

以提供所需的高度

代码如下：

是的，黑色条已经准备好了，但是灰色条（顶部）并没有在全屏上展开，而且我在容器流体上而不是容器上进行此操作。所以，您希望顶部条是屏幕的全宽，对吗？没错，我已经使用了容器流体而不是容器类，但如果没有帮助，请用您拥有的完整代码更新您的问题。哦，我明白了。你想要一个酒吧作为菜单。好的。是的，黑色条已经准备好了，但是灰色条（顶部）没有在全屏上展开，我也在容器流体上展开，而不是在容器上。所以，你希望顶部条是屏幕的全宽，对吗？没错，我已经用容器流体而不是容器类，但如果没有帮助，请用您拥有的完整代码更新您的问题。哦，我明白了。你想要一个酒吧作为菜单。好啊

.icon-bar a:hover
{
  background-color: #000;
}
.active
{
  background-color: #4CAF50;
}

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

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

.fa
{
  padding: 0px 10px;
}

<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>