Question

我第一次学习bootstrap，下拉菜单似乎没有格式化，看起来不像我做的其他菜单选项。点击时它也没有出现，但我完全按照教程。关于问题或错误的任何想法？

<html>
    <head>
        <title>Bootstrap Testing</title>
        <link rel="stylesheet" type="text/css" href="">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    </head>
    <body>

    <nav class='navbar navbar-inverse'>
        <div class='container-fluid'>
            <!--Logo-->
            <div class='navbar-header'>
                <a href="#" class='navbar-brand'>MY LOGO</a>
            </div>

            <!--Menu Items-->
            <div>
                <ul class='nav navbar-nav'>
                    <li class='active'><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>

            <!--drop down menu-->
            <li class='dropdown'>
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">My Profile <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Friends</a></li>
                    <li><a href="#">Photos</a></li>
                    <li><a href="#">Settings</a></li>
                </ul>
            </li>

        </div>
    </nav>

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js" type="text/javascript"></script>
</body>

Answer 1

您需要将<li class='dropdown'>放在<ul class='nav navbar-nav'>内。（在没有父列表元素的情况下，<li>元素的存在可能会引起警报。）

因此，您的HTML部分应该改组为：

<!-- [...] -->

<!--Menu Items-->
<div>
    <ul class='nav navbar-nav'>
        <li class='active'><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <!--drop down menu-->
        <li class='dropdown'>
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">My Profile <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#">Friends</a></li>
                <li><a href="#">Photos</a></li>
                <li><a href="#">Settings</a></li>
            </ul>
        </li>
    </ul>
</div>

<!-- [...] -->

这是修订后代码的Bootply。希望这可以帮助！如果您有任何问题，请告诉我。

Answer 2

在加载jquery之后，需要启动bootstrap.min.js。我总是喜欢在这里使用基本模板引导程序启动我的文档：http://getbootstrap.com/getting-started/#template

这样可以更加轻松地确保我按照正确的顺序加载所有内容。

您还需要使用“nav navbar-nav”类将您的下拉列表移动到ul内。像这样：

<ul class='nav navbar-nav'>
    <li class='active'><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <!--drop down menu-->
    <li class='dropdown'>
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">My Profile <span class="caret"></span></a>
         <ul class="dropdown-menu">
             <li><a href="#">Friends</a></li>
             <li><a href="#">Photos</a></li>
             <li><a href="#">Settings</a></li>
          </ul>
      </li>
  </ul>

为什么我的bootstrap下拉菜单看起来没有格式化？

2 个答案: