twitter-bootstrap - Bootstrap 词缀 nav 包裹在小屏幕上

Question

我在引导程序中有一个附加的导航，效果很好，直到你在 iPhone 上查看。它对于垂直方向来说太宽了。我只想导航到“nowrap”和“overflow-x：scroll”。我正在利用所有

• Bootstrap 的流畅布局
• 引导响应功能
• “固定”导航

我以为我只是white-space:nowrap; overflow-x:scroll;在导航的某个部分，但无法让它工作。

在更广泛的媒体上表现出色：

在狭窄的媒体上不太好，试图只在导航上获得水平滚动（而不是整个页面）：

这是一个小提琴。调整结果窗格的大小，直到它非常窄（如垂直方向的 iPhone 屏幕）：http: //jsfiddle.net/dirkraft/HQJfb/2/

Answer 1

那么您遇到的问题可以通过使用媒体查询来解决 iphone 分辨率，如下所示： Js fiddle with your example http://jsfiddle.net/shail/HQJfb/6/

@media (max-width: 480px) {
.row-fluid:after, .row-fluid:before {
    margin-bottom:10px;
}
.navbar .nav {
    margin: 0px;
}
.navbar .nav > li > a {
    padding:10px 8px;
}
}