html - bootstrap nav-collapse 折叠时不会显示图标

Question

<nav class="navbar navbar-inverse navbar-fixed-top" id="target1">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-white icon-chevron-down"></span>
</a>
<div class="container-fluid">
<div class="navbar-inner">
<div  class="brand" style="padding-left:50px"><strong>abc.def </strong></div>
<div class="brand"  style="padding-left:40px"><strong>1234</strong></div>   
<ul class="nav">
<li style="padding-left:25px"><a href="contact.php"><i class="icon-white icon-envelope"></i><strong>Mail Us</strong></a></li>
<li><a href="/livechat/client.php"><i class="icon-white icon-comment"></i><strong>Live Chat</strong></a></li>
<li class="hidden-phone"><a href=""><i class="icon-white icon-globe">     </i><strong>Remote</strong></a></li>
<div class="nav nav-collapse">  
<li><a href="#approach"><strong>Our Approach</strong></a></li>
<li><a href="#services"><strong>Services</strong></a></li>
<li><a href="#aboutus"><strong>About Us</strong></a></li>

</ul>
    </div></div>
</nav>

在这个 bootstrap 中，导航栏会折叠，但字形图标在最小化时不会显示。有什么想法或建议吗？

Answer 1

您的元素有点乱，而且您缺少 <a class="btn btn-navbar"...零件。

<nav class="navbar navbar-inverse navbar-fixed-top" id="target1">
<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" style="padding-left:50px"><strong>abc.def </strong></a>

        <div class="nav-collapse collapse">
            <ul class="nav">
                <li><a href="contact.php"><i class="icon-white icon-envelope"></i><strong>Mail Us</strong></a></li>
                <li><a href="/livechat/client.php"><i class="icon-white icon-comment"></i><strong>Live Chat</strong></a></li>
                <li class="hidden-phone"><a href=""><i class="icon-white icon-globe"></i><strong>Remote</strong></a></li>
                <li><a href="#approach"><strong>Our Approach</strong></a></li>
                <li><a href="#services"><strong>Services</strong></a></li>
                <li><a href="#aboutus"><strong>About Us</strong></a></li>
            </ul>
        </div>

    </div><!-- container -->
</div><!-- navbar-inner -->

并且不要忘记可折叠的插件...

<script>
$(document).ready(function() {
    $('.collapse').collapse();
});
</script>