Question

我正在尝试创建一个响应式导航栏，但出于某种原因，当导航栏在此处拼写时，btn-bav栏从未在网站上显示为导航栏的html代码

    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="index.html">Site Name</a>
           <div class="nav-collapse">
            <ul class="nav">
              <li class="active"><a href="index.html"><i class="icon-home">Home</i></a></li>
                  <li><a href="filmTv.html"><i class="icon-film">Film/TV</i></a></li>
              <li><a href="linux.html"><i class="icon-linux">Linux</i></a></li>
            </ul>
            <ul class="nav">
             <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-terminal">Coding</i><b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">JavaScript/Jquery</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
              </ul>
           </li>
          </ul>    
            <form class="navbar-search">
              <input type="text" class="search-query" placeholder="Search">
            </form>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div><!--/.end of navbar -->

为什么会这样？

<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>

当屏幕尺寸缩小到940px以下时，

不会显示。

这是真实的css

@media (max-width:979px) {
    body {
        padding-top:0;
    }
    .navbar-fixed-top {
        position:static;
        margin-bottom:18px;
    }
    .navbar-fixed-top .navbar-inner {
        padding:5px;
    }
    .navbar .container {
        width:auto;
        padding:0;
    }
    .navbar .brand {
        padding-left:10px;
        padding-right:10px;
        margin:0 0 0 -5px;
    }
    .navbar .nav-collapse {
        clear:left;
    }
    .navbar .nav {
        float:none;
        margin:0 0 9px;
    }
    .navbar .nav>li {
        float:none;
    }
    .navbar .nav>li>a {
        margin-bottom:2px;
    }
    .navbar .nav>.divider-vertical {
        display:none;
    }
    .navbar .nav .nav-header {
        color:#999999;
        text-shadow:none;
    }
    .navbar .nav>li>a,.navbar .dropdown-menu a {
        padding:6px 15px;
        font-weight:bold;
        color:#999999;
        -webkit-border-radius:3px;
        -moz-border-radius:3px;
        border-radius:3px;
    }
    .navbar .dropdown-menu li+li a {
        margin-bottom:2px;
    }
    .navbar .nav>li>a:hover,.navbar .dropdown-menu a:hover {
        background-color:#222222;
    }
    .navbar .dropdown-menu {
        position:static;
        top:auto;
        left:auto;
        float:none;
        display:block;
        max-width:none;
        margin:0 15px;
        padding:0;
        background-color:transparent;
        border:none;
        -webkit-border-radius:0;
        -moz-border-radius:0;
        border-radius:0;
        -webkit-box-shadow:none;
        -moz-box-shadow:none;
        box-shadow:none;
    }
    .navbar .dropdown-menu:before,.navbar .dropdown-menu:after {
        display:none;
    }
    .navbar .dropdown-menu .divider {
        display:none;
    }
    .navbar-form,.navbar-search {
        float:none;
        padding:9px 15px;
        margin:9px 0;
        border-top:1px solid #222222;
        border-bottom:1px solid #222222;
        -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.1);
        -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.1);
        box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar .nav.pull-right {
        float:none;
        margin-left:0;
    }
    .navbar-static .navbar-inner {
        padding-left:10px;
        padding-right:10px;
    }
    .btn-navbar {
        display:block;
    }
    .nav-collapse {
        overflow:hidden;
        height:0;
    }
}
@media (min-width:980px) {
    .nav-collapse.collapse {
        height:auto !important;
        overflow:visible !important;
    }
}

这是jsfiddle http://jsfiddle.net/hZktq/

Answer 1

问题出在你的CSS上。我拿了你的jsfiddle，删除了你的css代码并添加了bootstrap cdn（https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css）

结果如下：http://jsfiddle.net/rCAQH/1/

当屏幕宽度缩小时，btn-navbar永远不会显示

1 个答案: