Bootstrap 4自定义导航栏实现求助：带侧边及中部图片后方线条

嘿，我来帮你搞定这个自定义导航栏！你要的「图片居中、链接分布两侧、图片及左右带线条」的效果，用Bootstrap的flex布局配合一点自定义CSS就能轻松实现，下面是具体的步骤和代码示例：

1. 基础HTML结构 #

我们把导航栏分成三个核心部分：左侧链接、中间Logo、右侧链接，利用Bootstrap的flex特性让它们合理分布：

<nav class="navbar navbar-expand-lg navbar-light bg-light custom-navbar">
  <!-- 响应式折叠按钮 -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCustomContent">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarCustomContent">
    <div class="container-fluid d-flex align-items-center justify-content-between">
      <!-- 左侧导航链接 -->
      <div class="nav-group-left">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#">首页</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">产品列表</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">优惠活动</a>
          </li>
        </ul>
      </div>

      <!-- 居中Logo -->
      <div class="navbar-logo">
        <img src="your-logo.png" alt="品牌Logo" class="img-fluid" style="height: 60px;">
      </div>

      <!-- 右侧导航链接 -->
      <div class="nav-group-right">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#">关于我们</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">联系客服</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">购物车</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>

2. 自定义CSS实现线条效果 #

接下来添加CSS来实现「图片后方及两侧带线条」的需求，这里分两种常见场景：

场景一：导航栏底部通栏线条，Logo区域覆盖线条 #

如果想要导航栏底部有一条完整的线条，只有Logo下方被背景色覆盖，代码如下：

.custom-navbar {
  position: relative;
}

/* 底部通栏线条 */
.custom-navbar::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #ddd;
  z-index: 1;
}

/* Logo区域用背景色覆盖线条 */
.navbar-logo {
  position: relative;
  z-index: 2;
  background-color: #f8f9fa; /* 和导航栏背景色保持一致 */
  padding: 0 30px; /* 控制Logo左右的空白宽度，让线条在两侧显示 */
}

/* 让左右链接组垂直居中 */
.nav-group-left, .nav-group-right {
  display: flex;
  align-items: center;
}

场景二：Logo左右两侧单独显示线条 #

如果想要的是「左侧链接 → 线条 → Logo → 线条 → 右侧链接」的效果，就用下面的CSS：

.container-fluid {
  position: relative;
}

/* 左侧链接后方的线条 */
.nav-group-left::after {
  content: "";
  height: 1px;
  background-color: #ddd;
  flex: 1;
  margin: 0 20px;
}

/* 右侧链接前方的线条 */
.nav-group-right::before {
  content: "";
  height: 1px;
  background-color: #ddd;
  flex: 1;
  margin: 0 20px;
}

/* 确保三个部分在一行均匀分布 */
.nav-group-left, .navbar-logo, .nav-group-right {
  display: flex;
  align-items: center;
}

3. 响应式适配 #

为了在小屏幕上有更好的体验，我们添加媒体查询，让导航栏在移动端自动切换为垂直布局：

@media (max-width: 991px) {
  .container-fluid {
    flex-direction: column;
    gap: 1.5rem;
    padding: 1rem 0;
  }

  /* 隐藏桌面端的线条 */
  .custom-navbar::after,
  .nav-group-left::after,
  .nav-group-right::before {
    display: none;
  }
}

你可以根据自己的品牌风格，调整线条颜色、间距、Logo大小这些细节，这个方案完全能满足你的需求！

内容的提问来源于stack exchange，提问作者Mehdi Karimi