使用 div 绘制空水平条

Question

我想绘制 2 个 div，如下面的线框示例所示。后一个（黑条）没有内容。我将如何使用 Bootstrap 4 绘制这 2 个 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>

以下是我在 Web Dev 的评论后重试的代码：

CSS： .icon-bar { 宽度：100%； 背景颜色：黑色； 溢出：自动； 对齐项目：居中； } .icon-bar a { 向左飘浮; 文本对齐：居中； 宽度：20%； 填充：12px 0； 过渡：全部； 白颜色; 字体大小：36px； }

.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;
}

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>

Wireframe of divs

重试的输出：

Answer 1

在这种情况下，您只需将bg-secondary 类添加到第一行，为其赋予灰色背景色，然后在下面创建第二个行列对，并将bg-dark 添加到那里的空列以及style="height: 40px;" 给它所需的高度。

代码如下：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="container">
    <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>