Question

我一直在为一个网站的导航栏工作，我已正确调整它的大小但当它变成响应栏（将链接折叠到下拉列表中）时，我无法显示可折叠菜单。带有3个栏和我隐藏的导航栏品牌的列表按钮显示但我无法让菜单下拉。有任何想法吗？

代码：

<div class="navbar navbar-fixed-top head-navigation" role="navigation">
<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle Navigation</span>
            <span class="fa fa-bars"></span>
        </button>
        <a class="navbar-brand brand-hidden" href="#"><i class="fa fa-circle"></i> &nbsp; Brand &nbsp; <i class="fa fa-circle"></i></a>
</div>
<div class="navbar-collapse collapse">
    <ul class="nav nav-justified">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a class="img-logo" href="#"><img id="main-logo" src="img/logo.png"></a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
    </ul>
</div>

Answer 1

data-target应该指向id而不是class，而不是data-target=".navbar-collapse"，请使用data-target="#someID"，然后将ID添加到将要折叠的div中，<div class="navbar-collapse collapse" id="someID">

working bootply link

<div class="navbar navbar-fixed-top head-navigation" role="navigation">
<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#someID">
            <span class="sr-only">Toggle Navigation</span>
            <span class="fa fa-bars"></span>
        </button>
        <a class="navbar-brand brand-hidden" href="#"><i class="fa fa-circle"></i> &nbsp; Brand &nbsp; <i class="fa fa-circle"></i></a>
</div>
<div class="navbar-collapse collapse" id="someID">
    <ul class="nav nav-justified">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a class="img-logo" href="#"><img id="main-logo" src="img/logo.png"></a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
    </ul>
</div></div>

Answer 2

您是否也在加载bootstrap.js或collapse.js + transitions.js？如文档中所述，导航崩溃在没有它们的情况下无法工作：http://getbootstrap.com/components/#requires-javascript-plugin

Answer 3

我可以对您的代码进行一些更改以修复问题

<div class="container">
<div class="navbar-default navbar-fixed-top head-navigation" role="navigation">
<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle Navigation</span>
            <span class="fa fa-bars"></span>
        </button>
        <a class="navbar-brand brand-hidden" href="#"><i class="fa fa-circle"></i> &nbsp; Brand &nbsp; <i class="fa fa-circle"></i></a>
</div>
<div class="navbar-collapse collapse">
    <ul class="nav nav-justified">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a class="img-logo" href="#"><img id="main-logo" src="img/logo.png"></a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
    </ul>
</div>
  </div>

这里有一个jsbin链接：http://jsbin.com/disasusuri/2/ ps：我使用的是最后一个版本的bootstrap

响应式bootstrap导航栏无法正常工作

3 个答案:

working bootply link