Bootstrap - 导航栏折叠将不起作用

Question

我是网络开发的新手。请有人帮我弄清楚我的 Bootstrap 代码有什么问题吗？当 window 缩小到移动设备的大小时，折叠按钮不起作用，菜单也不会下拉。衷心感谢您的提前回复。

这是我的 CSS:

#custom-bootstrap-menu.navbar-default .navbar-brand {
color: rgba(119, 119, 119, 1);
}
#custom-bootstrap-menu.navbar-default {
font-size: 14px;
background-color: rgba(248, 248, 248, 1);
border-width: 1px;
border-radius: 4px;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a {
color: rgba(119, 119, 119, 1);
background-color: rgba(248, 248, 248, 0);
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus {
color: rgba(51, 51, 51, 1);
background-color: rgba(248, 248, 248, 0);
}
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus {
color: rgba(85, 85, 85, 1);
background-color: rgba(231, 231, 231, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-toggle {
border-color: #ddd;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus {
background-color: #ddd;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar {
background-color: #888;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar {
background-color: #888;
}

这是我的 HTML:

<!DOCTYPE html>
<html>
<!-- HEAD BEGINS -->    
<head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1"/>

    <title>Bootstrap</title>

    <!------------------------- jQuery  ----------------- -->   
    <script type="text/javascript" src="jquery.min.js"></script>

    <!-- ----------------------- jQuery UI ----------------- -->

    <link rel="stylesheet" href="http://ajax.googleapis.com/
            ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" />

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/
            libs/jqueryui/1.10.4/jquery-ui.min.js"></script>


    <!-- -------------------------- Bootstrap ------------------ -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- ----------------------- CSS STYLE ---------------------- -->

    <link rel="stylesheet" type="text/css" href="style.css" />  

    <!-- ----------------------- JAVASCRIPT ---------------------- -->

    <script type="text/javascript" src="voucher.js"></script>

</head>
<!-- HEAD ENDS -->

<body>

<div id="custom-bootstrap-menu" class="navbar navbar-
default"role="navigation">
<div class="container-fluid">
<div class="navbar-header"><a class="navbar-brand" href="#">Brand</a>
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-menubuilder"><span class="sr-only">Toggle 
navigation</span><span class="icon-bar"></span><span class="icon-
bar"></span><span class="icon-bar"></span>
        </button>
    </div>
    <div class="collapse navbar-collapse navbar-menubuilder">
        <ul class="nav navbar-nav navbar-left">
            <li><a href="/">Home</a>
            </li>
            <li><a href="/products">Products</a>
            </li>
            <li><a href="/about-us">About Us</a>
            </li>
            <li><a href="/contact">Contact Us</a>
            </li>
        </ul>
    </div>
</div>
</div>  
</body>
</html>

Answer 1

您的 HTML 中没有包含 bootstrap.js。将其添加到 bootstrap.min.css 引用之后的头部，或正文内页面底部的某个位置。

Bootstrap - 导航栏折叠将不起作用

Bootstrap - Navbar collapse will not work

html

css

twitter-bootstrap

navbar

collapse