Question

您可以看到上面的图片。我不知道它不起作用的原因。我是noob to css，html和bootstrap。任何人都可以给我一些想法如何解决这个问题？提前致谢。

这是我的HTML代码。

     <nav class="navbar navbar-default navbar-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-togglel="collapse" data-target="#nav-collapse"></button>
            <img class="img-responsive" src="images/brandz.png" >
        </div>

    <div class="collapse navbar-collapse" id="nav-collapse">
        <ul class="nav navbar-nav">
            <li><a href="#">Students</a></li>
            <li><a href="#">Faculty</a></li>
            <li><a href="#">About us</a></li>
            <li><a href="#">Contact us</a></li>
        </ul>

        <ul class="nav navbar-nav navbar-right">
                    <li><a data-toggle="modal" href="#myModal"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
                    <!-- Modal -->
                        <div id="myModal" class="modal fade" role="dialog">
                            <div class="modal-dialog">
                    <!-- Modal content-->
                             <div class="modal-content">
                                 <div class="modal-header">
                                     <button type="button" class="close" data-dismiss="modal">&times;</button>
                                     <img src="images/logo.png" class="logo">
                                 </div>
                                 <div class="modal-body">
                                    <p>Some text in the modal.</p>
                                 </div>
                                 <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                 </div>
                             </div>
                            </div>
                       </div>
        </ul>
    </div>
</div>
</nav>

这是我的css代码。

 .navbar-default .navbar-nav > li > a {
font-weight: 300;
color: #949494;
display: block;
padding: 3px 20px 5px 60px;
border-bottom: 3px solid transparent;
line-height: 97px;
-webkit-transition: all .4s ease-in-out 0s;
-moz-transition: all .4s ease-in-out 0s;
transition: all .4s ease-in-out 0s;

 }
 .navbar-default{
 background-color:#fff;

 }
 .nav>li>a {
  position: relative;
 }
.navbar-default .navbar-right > li > a {
padding-left: 70px;
padding-right: 1px;
}
.glyphicon-log-in{

}

Answer 1

1）在标题中包含FontAwesome

http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css

2）添加

<i class="fa fa-bars"></i>

到

<button type="button" class="navbar-toggle" data-togglel="collapse" data-target="#nav-collapse"></button>

示例：

<button type="button" class="navbar-toggle" data-togglel="collapse" data-target="#nav-collapse"><i class="fa fa-bars"></i></button>

导航栏折叠按钮不起作用

1 个答案: