twitter-bootstrap Twitter 引导程序 3：当词缀触发时导航栏改变宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23870330/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter bootstrap 3: Navbar changes width when affix fires
提问by Dong3000
Well, I have a curious issue concerning the bootstrap-3 affix script. You can see the problem in this fiddle. Please maximise the result-frame horizontally and scroll down so that affix gets fired. As you can see, the navbar increases at the right side and I really cannot see any reason for this effect. I temporarily solved the problem by addng
好吧，我有一个关于 bootstrap-3 后缀脚本的奇怪问题。你可以在这个fiddle 中看到这个问题。请水平最大化结果框架并向下滚动，以便触发词缀。如您所见，导航栏在右侧增加，我真的看不出这种效果的任何原因。我通过addng暂时解决了这个问题
.container
{
padding-left: 0px;
padding-right: 0px;
}
to the css. But, as you can see, it's not very pretty and I don't want to remove these paddings. Alternatively, I can set a static width, like
到CSS。但是，正如你所看到的，它不是很漂亮，我不想删除这些填充。或者，我可以设置一个静态宽度，比如
width: 1140px;
in #nav.affix. But this is not very responsive... I realy tried a lot of approaches, but couldn't get any satisfying results. Do you know, what's causing it?
在#nav.affix 中。但这不是很敏感......我确实尝试了很多方法，但都没有得到任何令人满意的结果。你知道是什么原因造成的吗？
Edit
编辑
Okay, Chrome's debugger gives me further informations: Before affix is fired, the nav-element got the class 'affix-top' amongst others (abstract from chrome-debugger NOT html source!):
好的，Chrome 的调试器为我提供了更多信息：在触发词缀之前，导航元素获得了类“词缀顶部”等（摘自 chrome-debugger 而非 html 源代码！）：
<nav id="nav" class="navbar navbar-default affix-top" role="navigation" data-spy="affix" data-offset-top="133" style="background-color: yellow">
Curiously, affix-top isn't declared in the HTML-code. Nevertheless, #nav.nav.navbar.navbar-default-affix-top is sized like: 1140px x 52px.
奇怪的是，在 HTML 代码中并没有声明 afix-top。尽管如此，#nav.nav.navbar.navbar-default-affix-top 的大小为：1140px x 52px。
After scrolling and affix is fired, the class 'affix-top' changes to 'affix' and 'affix' is sized like: 1170px x 52px.
滚动和词缀被触发后，类 'affix-top' 更改为 'affix' 并且 'affix' 的大小为：1170px x 52px。
These are the 30px, the navbar grows to the right. But how can i stop it? Above all, I cannot find the class affix-top in any csv-files...
这些是 30px，导航栏向右增长。但我怎么能阻止呢？最重要的是，我在任何 csv 文件中都找不到类词缀顶部...
采纳答案by Adrian Preuss
You can't solve that. The problem is the position: fixed;. The Navbar will be rendered by the browser without leftor rightproperty.
你不能解决那个。问题是position: fixed;. 导航栏将由浏览器在没有leftorright属性的情况下呈现。
You can only solve the issue with three things:
您只能通过三件事来解决问题：
1. Use absolute positioning.
1. 使用绝对定位。
Use position: absolute;and change the topvalue on scrolling with jQuery. disadvantage: You need a Javascript-part for that.
使用jQueryposition: absolute;更改top滚动值。缺点：为此您需要一个 Javascript 部分。
2. set left/right
2.设置左/右
Set a left: ?px;or right: ?px
设置一个left: ?px;或right: ?px
3. define a special width
3.定义一个特殊的宽度
Set a min-width: ?px;and/or max-width: ?px;for each media-query
为每个媒体查询设置一个min-width: ?px;和/或max-width: ?px;
回答by Florian Fischer
It worked for me when I gave the affix class a min-width of 100%. Works with responsive as well.
当我将词缀类的最小宽度设为 100% 时，它对我有用。也适用于响应式。
回答by Mike
I cannot confirm that
我无法确认
min-width:100%
最小宽度：100%
worked for me. I solved that problem using the innerWidth from the parent div. Following Example (includes one col - which of course needs to be put in a container and a row...):
对我来说有效。我使用父 div 中的 innerWidth 解决了这个问题。以下示例（包括一个 col - 当然需要放在一个容器和一行中......）：
<div class="col-sm-3 col-lg-2">
<div class="sidebar">
<div class="panel-heading">Some Title</div>
<div class="panel-body">
Some Content
</div>
</div>
</div>
</div>
Following JS set the width property at the first occur of 'affix.bs.affix'. I also ensured window resizes would be catched as well by adding a handler to its resize event:
以下JS在'affix.bs.affix'第一次出现时设置width属性。我还确保通过向其调整大小事件添加处理程序来捕获窗口调整大小：
//Applied affix to sidebar class
$('.sidebar').affix({
offset: {
top: 0
}
}).on('affix.bs.affix',function(){
setAffixContainerSize();
});
/*Setting the width of the sidebar (I took 10px of its value which is the margin between cols in my Bootstrap CSS*/
function setAffixContainerSize(){
$('.sidebar').width($('.sidebar').parent().innerWidth()-10);
}
$(window).resize(function(){
setAffixContainerSize();
});
Enjoy.
享受。
