Question

我想绘制2个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>

以下是我在Web开发者评论后重新尝试的代码：

CSS： .icon吧 { 宽度：100％; 背景颜色：黑色; 溢出：自动; align-items：center; } .icon-bar a { 向左飘浮; text-align：center; 宽度：20％; 填充：12px 0; 过渡：全部; 白颜色; font-size：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;"给它所需的高度。

以下是代码：

＆＃13;

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

＆＃13;

使用div绘制空的水平条

1 个答案: