Twitter bootstrap 3：当粘贴火焰时，Navbar会改变宽度

Question

好吧，我对bootstrap-3附加脚本有一个奇怪的问题。您可以在 fiddle 中看到问题。请水平最大化结果框架并向下滚动以便粘贴被激活。如您所见，导航栏在右侧增加，我真的看不出任何这种效果的原因。我暂时通过addng

解决了这个问题

 .container
{
padding-left: 0px;
padding-right: 0px;
}

到css。但是，正如你所看到的，它不是很漂亮，我不想删除这些填充。或者，我可以设置静态宽度，如

width: 1140px;

＃nav.affix 中的

。但这不是很敏感...我真的尝试了很多方法，但无法获得任何令人满意的结果。你知道吗，导致它的原因是什么？

修改

好的，Chrome的调试器为我提供了进一步的信息：在激活词缀之前，nav-element得到了类＆＃39;词缀顶部＆＃39;其中（摘自chrome-debugger NOT html source！）：

<nav id="nav" class="navbar navbar-default affix-top" role="navigation" data-spy="affix" data-offset-top="133" style="background-color: yellow">

奇怪的是，在HTML代码中没有声明affix-top。不过，＃nav.nav.navbar.navbar-default-affix-top的大小如下： 1140px x 52px 。

在滚动和词缀激活后，该课程会加上＆＃39;词缀＆＃39;更改为＆＃39;词缀＆＃39;和＆＃39;词缀＆＃39;大小如下： 1170px x 52px 。

这些是30px，导航栏向右增长。但是我怎么能阻止它呢？最重要的是，我找不到任何csv文件中的类别词缀...

Answer 1

你无法解决这个问题。问题是position: fixed;。导航栏将在没有left或right属性的情况下呈现。

您只能通过三件事来解决问题：

<强> 1。使用绝对定位。

使用position: absolute;并使用jQuery更改滚动时的top值。缺点：你需要一个Javascript部分。

<强> 2。设置左/右

设置left: ?px;或right: ?px

第3。定义特殊宽度

为每个媒体查询设置min-width: ?px;和/或max-width: ?px;

Answer 2

当我给词缀类的最小宽度为100％时，它对我有用。也适用于响应。

Answer 3

我无法确认

  

最小宽度：100％

为我工作。 我使用父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>

在JS设置第一次出现'affix.bs.affix'时的width属性。 我还确保通过在其resize事件中添加处理程序来捕获窗口大小调整：

  //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();
    });

享受。