css - bootstrap 3 导航栏确实在 768px 上换行

Question

那是我的笔:http://codepen.io/helloworld/pen/VLvRqX

当我将浏览器窗口的宽度调整到 768 像素以下时，导航栏的内容会换行到垂直菜单。

这是为什么？

<ul class="nav navbar-nav">

                    <li class="history-link">
                        <a href="http://www.test.com/de/deu/produkte/k%C3%BChlen-gefrieren/page.html">ThatsMe</a>
                    </li>

                    <li><a href="/">Home</a></li>



<li class="dropdown">
    <a class="dropdown-toggle" href="#" data-toggle="dropdown">French <span class="caret"></span></a>
    <ul class="dropdown-menu" role="menu">
            <li><a href="/Culture/SetCulture?cultureName=en-GB">Englisch</a></li>
            <li><a href="/Culture/SetCulture?cultureName=de-AT">#de-AT</a></li>
            <li><a href="/Culture/SetCulture?cultureName=bg-BG">#bg-BG</a></li>
    </ul>
</li>

                </ul>

Answer 1

因为这就是他们实现它的方式 - 响应式设计 View 。如果您不希望这种情况发生，则必须覆盖样式。他们使用媒体查询来检测宽度。

@media (min-width: 768px) {}

他们正在改变

.nav > li {
    float:left;
}

到

.nav > li {
    display: block;
    position: relative;
}