引导响应式导航栏链接对齐和样式问题

Bootstrap Responsive navbar Link Alignment and Style Issue

本文关键字：对齐 样式 问题 链接 响应 导航      更新时间：2023-09-26

浏览器折叠时，我的引导导航栏有问题。一切正常，内容响应和按钮出现，但是当按下按钮时，链接不会放在导航栏品牌下方，而是在导航栏品牌旁边的中间对齐。它似乎也没有拾取任何内容，或者正确的样式，即字体大小没有减少。知道这是什么吗？我知道这很简单，但我就是看不到它！！

谢谢。（正文代码如下）

  <nav class = "navbar navbar-inverse navbar-fixed-top">

     <div class = "container">
        <div class = "nav-header">
           <a href = "#" class = "navbar-brand">Site Title</a>
           <button type = "button" class = "navbar-toggle" data-toggle = "collapse" data-target = "#navHeaderCollapse">
              <span class = "icon-bar"></span>
              <span class = "icon-bar"></span>
              <span class = "icon-bar"></span>
           </button>
        </div>
        <div class = "collapse navbar-collapse" id="navHeaderCollapse">
           <ul class = "nav navbar-nav navbar-right">
              <li class = "active"><a href = "#">Home</a></li>
              <li class = "active"><a href = "#">About</a></li>
              <li class = "dropdown active">
                 <a class = "#" class = "dropdown-toggle" data-toggle = "dropdown">Media</a>
                 <ul class = "dropdown-menu">
                    <li><a href = "#">SubOne</a></li>
                    <li><a href = "#">SubTwo</a></li>
                    <li><a href = "#">SubThree</a></li>
                    <li><a href = "#">SubFour</a></li>
                 </ul>
              </li>
              <li class = "active"><a href = "#">Contact</a></li>
              </ul>
           </div>
     </div>
  </nav>

问题是错误的类名：

<div class = "nav-header"> 
change to 
<div class = "navbar-header">

http://jsfiddle.net/8pLven4s/

相关文章：