如何使用Bootstrap 4绘制含图标栏与空黑色栏的两个Div

Hey there! 我看你想要实现两个Div的布局——一个是包含图标的灰色栏，另一个是空的黑色栏。结合你给出的尝试代码，我整理了更简洁规范的Bootstrap 4实现方案，既能满足视觉需求，又能利用框架的内置特性减少冗余代码：

完整实现代码 #

HTML（记得先引入Bootstrap和Font Awesome）

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="container-fluid">
  <!-- 带图标的灰色栏 -->
  <div class="row bg-secondary py-3">
    <div class="col-sm-2 text-center">
      <i class="fa fa-circle custom-icon"></i>
    </div>
    <div class="col-sm-2 text-center">
      <i class="fa fa-circle custom-icon"></i>
    </div>
    <div class="col-sm-2 text-center">
      <i class="fa fa-globe custom-icon"></i>
    </div>
    <div class="col-sm-2 text-center">
      <i class="fa fa-search custom-icon"></i>
    </div>
    <div class="col-sm-2 text-center">
      <i class="fa fa-home custom-icon"></i>
    </div>
    <div class="col-sm-2 text-center">
      <i class="fa fa-trash custom-icon"></i>
    </div>
  </div>

  <!-- 空的黑色栏 -->
  <div class="row">
    <div class="col bg-dark" style="height: 40px;"></div>
  </div>
</div>

CSS

.custom-icon {
  font-size: 24px; /* 按需调整图标大小 */
  color: #ffffff; /* 图标设为白色，适配灰色背景 */
  padding: 0 8px; /* 增加图标左右间距 */
}

关键优化点说明 #

• 利用Bootstrap内置类减少自定义代码：
  • 用bg-secondary直接实现灰色背景，bg-dark实现黑色背景，不用自己写background-color
  • py-3给灰色栏添加上下内边距，让图标不会紧贴栏的边缘
  • text-center让每个列里的图标自动水平居中，省去了自定义margin和width的麻烦
• 简化HTML结构：去掉了多余的嵌套div（比如icons_div、icon），让代码更清爽
• 响应式布局：col-sm-2保证在小屏幕（≥576px）以上，6个图标均分栏的宽度；如果想在手机上也保持一行，把col-sm-2换成col-2即可
• 黑色栏高度控制：通过内联样式style="height: 40px;"直接设置高度，你也可以把它写成自定义类（比如.bar-height { height: 40px; }）方便复用

内容的提问来源于stack exchange，提问作者Shahrukh Nasir