0

我似乎无法让下拉和切换按钮工作。我知道很多人都遇到过这个问题，但我还没有找到解决方案。

<!DOCTYPE HTML>
<HTML>
    <head>
        <title>Bootstrap</title>
        <meta name="viewport" content="width=device-width, initial scale=1.0">
        <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
        <link href="css/styles.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div class="navbar navbar-inverse navbar-static-top">
            <div class="container">
                <a href="#" class="navbar-brand">PRECISE</a>
                <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <div class="collapse navbar-collapse navHeaderCollapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="active"><a href="#">Home</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Products<b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Tweet</a></li>
                            </ul>
                        </li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Contact Us</a></li>
                    </ul>
                </div>  
            </div>
        </div>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="js/bootstrp.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
            $('.dropdown-toggle').dropdown();
            });
        </script>
    </body>
</HTML>
4

2 回答 2

1

将以下代码添加到您的 CSS 中，它将使下拉菜单起作用：-

.dropdown:hover .dropdown-menu {
display: block;
color:#*any*;        
}.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
margin-top: 0;
}     
.dropdown:hover  .dropdown-toggle{
background-color: #*any*;
color:#*any*;
}

并在您的 html 页面中进行以下修改：-

<div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
        <li class="dropdown">
                   <a href="#" class="dropdown-toggle">Dropdown 
                                           <b class="caret"></b></a>
              <ul class="dropdown-menu" role = "menu" area-labelledby = "dLabel">
                <li><a href="#">Action 1</a></li>
                <li><a href="#">Action 2</a></li>
                <li><a href="#">Action 3</a></li>
              </ul>
            </li>
          </ul>
 </div>
于 2013-12-11T06:48:27.643 回答
0

发生这种情况是因为崩溃类已overflow设置为hidden. 但是设置overflow为visible中断。height解决方案是在切换栏可见时强制执行属性。您必须进行设置，以height使所有下拉列表都可见。在这种情况下，设置100px. 还需要添加!important.

.collapse.in {
    height: 100px !important;
}

确保正确导入 bootstrap.js：

<script src="js/bootstrp.js"></script>

看起来你错过了单词“bootstrap”中的字母“a”。

希望这有帮助。

于 2013-10-30T23:12:54.317 回答