Bootstrap-Navbar崩溃将不起作用

Question

I am a newbie in web development. 我是网络开发的新手。 Could someone help me figure out what is wrong with my Bootstrap code PLEASE? 有人可以帮我找出我的Bootstrap代码PLEASE有什么问题吗？ When the window is narrowed down to size of mobile devices the collapse button doesn't work and the menu will not drop down. 当窗口缩小到移动设备的大小时，折叠按钮不起作用，菜单也不会下拉。 I sincerely thank you for your response in Advance. 衷心感谢您对Advance的回复。

This is my CSS: 这是我的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;
}

This is my HTML: 这是我的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

You're not including bootstrap.js in your HTML. 您没有在HTML中包含bootstrap.js。 Add it to either the head just after the bootstrap.min.css reference, or somewhere at the bottom of the page inside the body. 将其添加到bootstrap.min.css引用之后的头部中，或在体内页面底部的某个位置。

Bootstrap-Navbar崩溃将不起作用

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-08-20 13:50:51

Bootstrap-Navbar崩溃将不起作用

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-08-20 13:50:51

解决方案1
1 已采纳 2015-08-20 13:50:51