html - 使用 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>