0

Github 顶部的栏是我尝试使用 Bootstraps 导航栏类（https://github.com/）复制的内容。

请注意栏如何延伸以填充整个浏览器窗口，而核心元素则保留在其固定列中？这就是我试图弄清楚的。

我有以下代码。 

<body>
    <div class="container">

    <div class="row">
        <div class="span12">
            <img src="/img/logo_sml.png">
        </div>
    </div>
</div>

<div class="navbar">
    <div class="navbar-inner">
        <a class="brand" href="#">Home</a>
    </div>
</div>

我的想法是，如果我关闭 main container，我可以放置navbar并让它填满浏览器的整个长度。这按计划工作，但是当我向其中添加内容时，navbar它们一直出现在页面的左侧（如预期的那样）。

所以！然后我想我可以开始一个新container的菜单项，然后将菜单项放入其中，然后出现在它们应该出现的中央列中。

包装一个菜单元素：

<body>
    <div class="container">

        <div class="row">
            <div class="span12">
                <img src="/img/logo_sml.png">
            </div>
        </div>
    </div>

    <div class="navbar">
        <div class="navbar-inner">
            <div class="container">
                <div class="span2">
                    <a class="brand" href="#">Home</a>
                </div>
            </div>
        </div>
    </div>

刷新了页面，然后......这不起作用。有没有办法扩展 Bootstrap 的“尾巴”，navbar同时保持内容为主container？

这是添加到contatiner类中的结果。这些元素一直位于浏览器的左侧。

在此处输入图像描述

4

1 回答 1

0

这是因为css有一个属性：

.navbar .container {
   width: auto;
}

如果您放置一个具有

.navbar .container {
   width: 940px;
}

它应该按您的预期工作。

您可以在此JsFiddle中查看使用的代码，并以全屏查看最终结果。

于 2013-04-19T20:58:03.293 回答