Question

使用以下代码：

<!DOCTYPE html>
<html>
    <head>
    <title>Bootstrap 101 Template</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
        <style>
            div[class^='span'] {
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <div class="navbar navbar-static-top navbar-inverse">
            <div class="navbar-inner">
                <div class="container-fluid">
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </a>

                    <a class="brand" href="#">Bootstrap Test</a>

                    <ul class="nav pull-right nav-collapse collapse">
                        <li class="active"><a href="#">Home</a></li>
                        <li class="divider-vertical"></li>
                        <li><a href="#">About</a></li>
                        <li class="divider-vertical"></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="containter-fluid">
            <div class="row-fluid">
                <div class="span12">
                    <h1>Hello, world!</h1>
                </div>
            </div>
            <div class="row-fluid">
                <div class="span2">2</div>
                <div class="span10">10</div>
            </div>
        </div>
        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>

我得到以下内容：

Bootstrap collapsed nav

然而，在Bootstrap网站的example中，所有折叠的链接都形成了一个垂直列表。关于我做错了什么想法？

编辑：从导航.pull-right中取出<ul>并将其替换为<div class="span8">解决了部分问题。不幸的是，看起来我的.brand元素导致了一些问题。

如果我将浏览器缩小到可折叠导航按钮位于.brand旁边的位置，则下面的链接不会形成列表：

enter image description here

如果缩小浏览器以使链接形成列表，则按钮会弹出.brand：

enter image description here

有没有办法让按钮与.brand 和保持同一条线，强制下面的链接形成一个垂直列表？

Answer 1

您必须使用inline-block或float:left。
如果是，请移除float并使用display:block

Answer 2

从代码的外观来看，你错过了一段非常重要的代码。

您需要关联bootstrap-responsive.css或bootstrap-responsive.min.css

此外，这是您的菜单应如下所示：

<div class="navbar navbar-static-top navbar-inverse">
    <div class="navbar-inner">
        <div class="container-fluid">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>

            <a class="brand" href="#">Bootstrap Test</a>

            <div class="pull-right nav-collapse collapse">
                <ul class="nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li class="divider-vertical"></li>
                    <li><a href="#">About</a></li>
                    <li class="divider-vertical"></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

带有可折叠导航的Bootstrap - 我得到的与文档不匹配

2 个答案: