Twitter Bootstrap：响应式导航栏右侧有空隙

我正在尝试实现响应式导航栏。它似乎工作，但当屏幕变小时，右侧会出现间隙。见截图：Twitter Bootstrap：响应式导航栏右侧有空隙

enter image description here

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

更新1：的jsfiddle

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

来源

2012-10-22 StackOverflowNewbie

你需要包括您的标记。你在使用流体类吗？ –

屏幕截图不够？ Navbars显然不使用'.row'或'.row-fluid'，所以我不确定你的意思。我试图从文档中复制这个。 – StackOverflowNewbie

尝试在导航栏内使用'container-fluid'而不是'container' –

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

Twitter Bootstrap旨在成为脚手架和组件，而不是开箱即用的解决方案，因此这可能是需要指定的其中一项。导航栏的static版本很可能会写入，因此它可以轻松用于除body以外的其他容器，并且这种情况发生在需要微调的20％的情况下。

来源

2012-10-22 11:12:09

我加了'body {width：100％}'，现在可以工作。但是，当我减小屏幕宽度时，问题是如何出现的？另外，我根据您的评论尝试了'.container-fluid'，但是我没有看到导航项的行为有任何不同;我应该看到什么？ – StackOverflowNewbie

关于navbars的主题，不应该在需要时垂直堆叠垂直响应吗？与本网站http://bootswatch.com/slate/中的第二个导航栏类似。我比Bootstraps JS解决方案更喜欢这种风格。 – StackOverflowNewbie

我没有检查调整大小的问题。毕竟，它可能实际上是自举中的一个小故障。一旦媒体查询在屏幕上显示大小，“body”就会被填充，而对导航栏的调整不足以对付它。就垂直堆垛而言，您可以轻松地做到这一点。导航栏本身可能不应该这样做，因为它使得除了导航链接之外还可以保留元素。 –

想到几个潜在的原因，但正如其他人指出，很难说没有看到代码。不过，我会补充一点，我明白，分享足够的代码来完成这样的事情是多么艰难，而不会给予太多的帮助。因此，这里有一些问题（和这个特定的问题，你不应该使用.container-fluid如先前建议，可能无论如何都不会工作，如果确实如此它只是掩盖可能加剧的问题。）：

你是否改变了任何响应式样式？如果是这样，你是否改变了.container的宽度，填充或边距？
您是否在响应式样中将某个宽度或边距应用于.navbar本身？这对我来说似乎是一个可能的原因。
<body>怎么样，你是否设置了填充？

来源

2012-10-22 02:11:30 jonschlinkert

我没有写任何CSS。这是100％Bootstrap。 – StackOverflowNewbie

你可以试试这个吗？当您在浏览器中预览页面时，右键单击并将页面保存到某个新文件夹。然后用该文件夹中的html和css创建一个jsfiddle。你不需要包含整个html页面，只是足以重现问题。或者，如果你会更舒服，随时在github（相同的用户名）上看我，并通过电子邮件与我联系。我很乐意尝试为你解决这个问题。 – jonschlinkert

谢谢。我发布了一个jsFiddle链接。 – StackOverflowNewbie

我通过添加下面的meta标签（任意）一个解决了这个问题：

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

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

来源

2014-02-06 00:43:54 gaplus

Twitter Bootstrap：响应式导航栏右侧有空隙

回答

相关问题