Bootstrap帮助 - 响应菜单不显示

我正在为学校做一个项目，在那里我们正在为一家卡车学校重新构建一个网站。我是超级笨手笨脚的新手，我遇到的问题是这个。Bootstrap帮助 - 响应菜单不显示

当我调整页面大小时，主导航消失，因为它应该是，但我不能让小菜单图标导航显示。根据getbootstrap.com和几次搜索，我尝试了所有你应该做的事情，但没有成功。我认为问题的一部分可能是我通过将导航区域分成两个容器来做某种黑客行为，这样带有徽标的顶部可能与实际菜单的下部颜色不同，而没有菜单或标题的黑客东西最终都会以双方不太明显的差距结束。

所以我不确定我做的黑客事情是否导致问题，如果是这样，我可以采取其他措施使导航栏顶部的颜色与底部不同，而不会获得不同的颜色边距在两侧？或者我只需要用切换代码做一些不同的事情？

这里是有问题的HTML（不切换代码...我试了好几个地方，所以我只是把它，希望它会更容易阅读）：

<nav class="navbar navbar-static-top" role="navigation"> 
    <div class="backgroundBlack"> 
    <div class="container "> 
    <div class="navbar-header "> 
     <h1><img src="images/logo.png" alt="logo" />Carolina Trucking Academy</h1> 
    </div> 
    </div> 
</div> 

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" > 
     <div class="container"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="index.html">Home <span class="sr-only">(current)</span></a></li> 
     <li role="presentation"><a href="careers.html">Careers in Trucking</a></li> 
     <li role="presentation"><a href="classes.html">Our Classes</a></li> 
     <li role="presentation"><a href="admissions.html">Admissions</a></li> 
     <li role="presentation"><a href="about.html">About Us</a></li> 
     <li role="presentation"><a href="contact.html">Contact</a></li> 
     </ul> 
    </div> 
    </div> 
</nav>

任何帮助将不胜感激！谢谢！

来源

2016-02-28 Liz

你只需要遵循bootstrap提供的结构。在较小的屏幕上，导航是隐藏的，并通过导航栏标题中的按钮进行切换。首先你缺少的是导航栏切换按钮。此按钮将以data-target=""属性在移动屏幕上定位您的导航栏折叠。我还将navbar默认类添加到导航栏中。这些是bootstrap已经实施的预制样式。另外为了得到2种不同的背景颜色，我刚刚将black-bg类添加到导航栏标题中的容器中，然后更改导航栏标题CSS以显示块和100％的宽度。如果你想改变navbar-default的颜色，只需在css中定位该类，并且导航栏的链接部分将改变背景颜色。此外，我还在容器的示例中使用了容器流体。你可以改变它到容器，如果你想我只是觉得它看起来更好用容器流体。

下面是它可能应该是：

<nav class="navbar navbar-default navbar-static-top"> 
     <div class="navbar-header"> 
     <div class="container-fluid black-bg"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">Logo</a> 
     </div><!--/.container-fluid --> 
     </div><!--/.navbar-header --> 
     <div id="navbar" class="navbar-collapse collapse"> 
     <div class="container-fluid"> 
      <ul class="nav navbar-nav"> 
      <li class="active"><a href="index.html">Home <span class="sr-only">(current)</span></a></li> 
      <li role="presentation"><a href="careers.html">Careers in Trucking</a></li> 
      <li role="presentation"><a href="classes.html">Our Classes</a></li> 
      <li role="presentation"><a href="admissions.html">Admissions</a></li> 
      <li role="presentation"><a href="about.html">About Us</a></li> 
      <li role="presentation"><a href="contact.html">Contact</a></li> 
      </ul> 
     </div><!--/.container-fluid --> 
    </div><!--/.nav-collapse --> 
    </nav>

而且，让你的导航栏黑色和你的导航栏头满WIDT显示，您可以添加自定义样式，这些类的CSS：

.navbar-default{ 
    border-radius: 0; 
} 
.navbar-header{ 
    display: block; 
    width: 100%; 
} 
.black-bg{ 
    background: #000; 
}

这里是你展示这个动作以及如何拨弄它看起来Fiddle

来源

2016-02-28 05:06:07

太谢谢你了！ – Liz

Bootstrap帮助 - 响应菜单不显示

回答

相关问题