基于Bootstrap3的响应式导航栏适配与折叠实现技术问询

其实Bootstrap 3的导航组件本身就内置了响应式特性，咱们只需要围绕它的核心结构做些定制，就能完美匹配你要的效果——平板及更大屏幕用特定样式，小屏切换成另一种，点击toggle按钮后导航内容垂直排列。我给你拆解一下实现步骤，再附上完整的示例代码：

一、核心思路 #

Bootstrap 3的响应式断点是：小屏（<768px）、平板（≥768px）、桌面（≥992px）、大屏桌面（≥1200px）。咱们就以768px为分界点，分别定制大屏和小屏的导航样式，再利用自带的navbar-toggle和collapse组件实现toggle按钮的折叠/展开功能。

二、具体实现步骤 #

1. 搭建基础导航结构 #

先用Bootstrap的navbar组件搭建骨架，重点要把toggle按钮和可折叠的导航内容关联起来：

<nav class="navbar custom-navbar">
  <div class="container-fluid">
    <!-- 导航头部：包含logo和toggle按钮 -->
    <div class="navbar-header">
      <!-- toggle按钮，点击后触发collapse -->
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#customNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">你的Logo</a>
    </div>
    <!-- 可折叠的导航内容区域 -->
    <div class="collapse navbar-collapse" id="customNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">首页</a></li>
        <li><a href="#">产品中心</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">联系客服</a></li>
      </ul>
    </div>
  </div>
</nav>

这里要注意：data-target="#customNavbar"必须和collapse区域的id完全对应，否则toggle按钮会失效。

2. 定制大屏（平板及以上）样式 #

用媒体查询@media (min-width: 768px)来定义≥768px屏幕下的导航样式，比如自定义背景色、链接样式、间距等：

/* 平板及更大屏幕的导航样式 */
@media (min-width: 768px) {
  .custom-navbar {
    background-color: #2c3e50; /* 深蓝灰色背景 */
    border: none;
    border-radius: 0;
  }
  .custom-navbar .navbar-brand {
    color: #fff;
    font-size: 1.5em;
  }
  .custom-navbar .navbar-nav > li > a {
    color: #ecf0f1; /* 浅灰色文字 */
    padding: 15px 20px;
    transition: background-color 0.3s;
  }
  .custom-navbar .navbar-nav > li > a:hover {
    background-color: #34495e; /* hover时的深色背景 */
    color: #fff;
  }
}

3. 定制小屏（<768px）样式 #

再用@media (max-width: 767px)定义小屏的样式，同时确保点击toggle后导航垂直排列（Bootstrap默认已经是垂直，但可以通过CSS强化效果）：

/* 小屏导航样式 */
@media (max-width: 767px) {
  .custom-navbar {
    background-color: #e74c3c; /* 红色背景 */
  }
  .custom-navbar .navbar-brand {
    color: #fff;
  }
  /* 强制导航链接垂直排列 */
  .custom-navbar .navbar-collapse .nav {
    flex-direction: column;
    width: 100%;
  }
  .custom-navbar .navbar-collapse .nav > li > a {
    color: #fff;
    padding: 12px 15px;
    border-bottom: 1px solid rgba(255,255,255,0.1); /* 加个分割线更清晰 */
  }
  .custom-navbar .navbar-collapse .nav > li.active > a {
    background-color: #c0392b; /* 激活项的深色背景 */
  }
}

三、你之前可能踩坑的地方 #

我猜你之前失败大概率是这几个原因：

• 没有正确关联navbar-toggle的data-target和collapse区域的id，导致点击toggle没反应；
• 自定义CSS的优先级不够，被Bootstrap的默认样式覆盖了（所以我用了custom-navbar这个自定义类来包裹，提高优先级）；
• 媒体查询的断点写错了，比如把大屏的断点写成了max-width，导致样式不生效。

只要按照上面的代码来，就能实现你要的效果啦！

内容的提问来源于stack exchange，提问作者Atul Kumar