Question

我正在尝试实施响应式导航栏。它看起来很有效，但是当屏幕变小时，右侧会出现间隙。见屏幕截图：

enter image description here

我没有写过任何CSS。所有这些都是纯粹的Bootstrap。

更新1：jsFiddle

http://jsfiddle.net/BaR3q/ - 它也是在JSFiddle上做的。所以我要么做错了（可能），要么Twitter搞砸了（不太可能）。 what to do?

Answer 1

标记中没有任何内容指定元素应该展开以填充视口。添加body { width: 100%}会处理它，或者可选地将navbar的宽度覆盖为auto。

Twitter Bootstrap旨在构建脚手架和组件，而不是开箱即用的解决方案，因此这可能是需要指定的事情之一。导航栏的static版本可能已编写，因此可以轻松地在body以外的容器中使用，而这恰好落在需要轻推的20％的情况下。

Answer 2

有一些可能的原因浮现在脑海中，但正如其他人所指出的那样，如果不看代码就很难说。不过，我要补充一点，我明白分享足够的代码来做这样的事情是多么艰难，而不会给予太多分析。所以这里有一些问题（对于这个特定问题，你不应该像以前建议的那样使用.container-fluid。这可能无论如何都不会起作用，如果它确实只是掩盖了可能复合的问题）：

您是否更改了任何响应式样式？如果是这样，您是否更改了.container上的宽度，填充或边距？
您是否在响应式样式的某处向.navbar本身应用宽度或边距？这似乎是我的原因。
<body>怎么样，你是否设置了填充？

Answer 3

我通过添加（或者）以下元标记之一解决了这个问题：

<meta name="viewport" content="initial-scale=1">

<meta name="viewport" content="user-scalable = no">

Twitter Bootstrap：响应式导航栏右侧有差距

3 个答案: