Bootstrap 导航栏按钮有效，但按钮本身不显示

Question

    <!---header and Navigation--->
    <header>
        <nav class="navbar navbar-defaault navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-collapse">
                        <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="#featured"><span class="subhead">Jeremy Williams</span></a>
                </div><!---navbar-header--->
                <div class="collapse navbar-collapse" id="nav-collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="active"><a href="#featured">Home</a></li>
                        <li><a href="#about_me">About Me</a></li>
                        <li><a href="#what_i_do">What I do</a></li>  
                        <li><a href="#my_work">My work</a></li> 
                    </ul>  
                </div><!---collapse navbar-collapse--->
            </div><!---Container--->
        </nav>
      <header>

我不确定我是否遗漏了什么，但那里有一些东西，如果你点击它，它就可以工作，但你只是看不到要点击的按钮。

Answer 1

我想你的意思是屏幕小的时候出现的汉堡包按钮。这三行是使用 <span class="icon-bar"></span> 部分代码创建的。它们是白色的，这就是为什么您看不到它们，但它们确实存在（尝试单击小屏幕的右上角）。使用 CSS 更改导航背景或图标栏。

 .icon-bar {
   background-color:#FF0000 !important;
 }

在此处查看结果：bootply

Bootstrap 导航栏按钮有效，但按钮本身不显示

Bootstrap navbar button works but the button itself doesn't show

html

css

menu

button

twitter-bootstrap