Html 带可折叠导航的引导-我得到的不是'；与文档不匹配_Html_Css_Twitter Bootstrap

Html 带可折叠导航的引导-我得到的不是'；与文档不匹配

html css twitter-bootstrap

Html 带可折叠导航的引导-我得到的不是'；与文档不匹配,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,使用以下代码： <!DOCTYPE html> <html> <head> <title>Bootstrap 101 Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <link h

使用以下代码：

<!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>


引导101模板
div[class^='span']{
边框：1px纯黑；
}







你好，世界！
2.
10

我得到以下信息：

然而，在Bootstrap站点上的中，所有折叠的链接都形成了一个垂直列表。你知道我做错了什么吗

编辑：取下

。将从导航中向右拉出
，并将其替换为
解决了部分问题。不幸的是，我的.brand
元素似乎导致了一些问题
如果我将浏览器缩小到可折叠导航按钮位于我的.brand
旁边，以下链接不会形成列表：

如果我收缩浏览器使链接形成一个列表，则按钮会在.brand
下方弹出：

有没有办法使按钮与.brand
保持在同一行，并强制下面的链接形成垂直列表？
您必须使用内联块
或浮动：左


如果是这样，则从代码外观中删除浮点
并使用显示：block
表示您缺少一段非常重要的代码
您需要链接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>









问题似乎出在上。向右拉
我把它放在导航列表上。编辑我的问题是因为出现了一个新的相关褶皱。@KevinM1所有你想修复的东西都在bootstrap.min.css
中。。唯一的问题是你必须找到正确的，然后改变。。它们将位于最底部，即@媒体屏幕（最大宽度：400px）
或对我来说没有区别。你能创建一个小提琴吗？只需将响应css添加到代码中，我就得到了一个几乎可以正常工作的标题。唯一的问题是你没有一个
，
（这就是它应该做的）在主答案上为你的菜单添加代码。改变这一点并添加响应css应该可以解决您的问题。将nav
列表放在容器div中就可以解决问题。谢谢