Bootstrap 导航栏固定顶部切换不显示答案

【问题标题】：Bootstrap navbar fixed top toggle not showingBootstrap 导航栏固定顶部切换不显示
【发布时间】：2016-03-02 05:18:50
【问题描述】：

我正在使用固定在顶部的引导导航栏，当我调整浏览器大小时，切换不显示。我不知道我错过了什么，但其他一切都很好。我在这里按照导航栏示例网站上的代码进行操作：Fixed top navbar example

 <div>
    <nav class="navbar navbar-fixed-top navbar-header-full navbar-default">

        <div class="header-full-title">
            <img src="~/Content/img/MTC_logo_header.png" class="img-responsive" />
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle=".navbar-collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar">VISIT</span>
                    <span class="icon-bar">DIRECTORY</span>
                    <span class="icon-bar">CONDOS</span>
                </button>
            </div>
            <ul class=" nav navbar-nav navbar-right">

                <li><a href="#" class="navStyle">OUR STORY</a></li>

                <li><a href="#" class="navStyle">VISIT</a></li>
                <li><a href="#" class="navStyle">DIRECTORY</a></li>
                <li><a href="#" class="navStyle">CONDOS</a></li>
                <li><a href="#" class="navStyle">APARTMENTS</a></li>
                <li class="dropdown">
                    <a href="#" class="navStyle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">EVENTS</a>
                    <ul class="dropdown-menu dropDownMTC pull-right">
                        <li><a href="#">YOGA ROCKS THE PARK</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">MONDAY NIGHT MOVIES</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">HORSES OF HONOR</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">THURSDAY IN THE PARK</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">EVENT SHUTTLE</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">HOLIDAY LIGHTS FESTIVAL</a></li>
                    </ul>
                </li>
                <li><a href="#" class="navStyle">NEWS</a></li>
            </ul>

        </div>

            </nav>

          </div>

CSS

            .navStyle{

           color:white;
         padding:5px 5px 5px 5px;
          margin: 0px;
         text-decoration:none;

        }

【问题讨论】：

如果您发布您的 CSS 代码和/或制作一个重现问题的小提琴将会很有帮助。
它使用 bootstrap 唯一的自定义类是 navstyle

标签： css twitter-bootstrap

【解决方案1】：

可能是因为这些：

<div id="navbar" class="navbar-collapse collapse">
<button type="button" class="navbar-toggle collapsed" data-toggle=".navbar-collapse" .../>

删除这些折叠属性应该可以完成这项工作

<div id="navbar" class="navbar-collapse">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle=".navbar-collapse" .../>

【讨论】：

做到了。感谢您的帮助！