CSS - 防止菜单破坏第二行

Question

当浏览器宽度约为1180时，菜单会突破到第二行。我该怎样阻止它这样做？

http://goo.gl/5UpJSv

Answer 1

您需要将汉堡菜单的断点更改为1200px，否则您可以增加容器的宽度：

.container {
    max-width: 1140px;
}

Answer 2

这是因为你的断点将.contaner div-s宽度设置为970px。现在你有了选择：

1. 在此布局上应用汉堡包菜单（而不仅仅是较低的分辨率）。
2. 稍微编辑结构：较小的边距，较小的填充，较小的字体大小。

Answer 3

汉堡菜单是您使用的按钮，一旦断点达到您网站上的1100px，就会显示导航。它被称为汉堡菜单，因为它们之间有3条水平线。

正如DNReNTi所说，你可以做到这一点，但保留你选择的布局，最好是你可以改变你的断点以更宽容或应用以下样式更改：

.cap-header-fixed .menu > li, .cap-primary-menu .menu > li {
display:inline-block;
padding: 0 8px;
}

另请注意，您已在@media only屏幕和（max-width：1100px）和（min-width：0px）以及要显示的主菜单中设置菜单图标（汉堡菜单）以显示（显示：块;）在@media（最小宽度：1100px）。将此更改为1101px，或者您将在1100px处找到汉堡包和桌面菜单都将显示。

希望这会有所帮助：）