Question

这里引导新手。我今天才开始使用Bootstrap来开发一个网站，但是有些东西正在发生，我无法弄明白。我使用以下代码创建导航：

    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <ul class="nav navbar-nav uppercase bold">
                <li><a href="#">Projecten</a></li>
                <li><a href="#">Over</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
            <a class="navbar-brand pull-right" rel="home" href="#"><img src="images/97x30.png" style="margin-top:-4px;"></a>
        </div>
    </div>

这个想法是左边有一组链接，右边是一个标识。现在我注意到，只要浏览器窗口大小大于768px（引导程序css仍然为.container分配宽度），这种方法就可以正常工作但是当窗口变小时（.container类不再具有宽度，我相信，导航栏左侧对齐的链接开始垂直堆叠，而不是水平堆叠。

ul中的大写和粗体类包含在我的自定义css中，用于设置链接的样式。

如果我猜测，它与“块”对齐有关，或者可能是.container变得太小而不能水平地适应链接，但是我无法弄清楚这一点，并且找不到类似的问题在网上。

我认为这可能非常简单，让我看起来很愚蠢，但我希望你能提供帮助。谢谢。

Answer 1

您可以像这样添加CSS以防止它堆叠..

.navbar-nav {
    min-width:360px;
    float: left;
    margin: 0;
}
.navbar-nav>li {
    float: left;
}

http://www.bootply.com/114462

Bootstrap Navbar内容堆叠

1 个答案: