Question

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>

我的想法是，如果我关闭主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课程中添加的结果。这些元素一直位于浏览器的左侧。

enter image description here

Answer 1

这是因为css有一个属性：

.navbar .container {
   width: auto;
}

如果你输入了一个

的css属性

.navbar .container {
   width: 940px;
}

它应该按照您的预期工作。

您可以在此JsFiddle和the final result in full screen中看到使用过的代码。

使用bootstrap导航栏复制github的topbar行为？

1 个答案: