Twitter bootstrap 3：导航栏在词缀触发时改变宽度

Posted 2023-03-06

【中文标题】Twitter bootstrap 3：导航栏在词缀触发时改变宽度

【英文标题】：Twitter bootstrap 3: Navbar changes width when affix fires

【发布时间】：2014-07-15 05:44:51

【问题描述】：

好吧，我有一个关于 bootstrap-3 附加脚本的奇怪问题。您可以在这个 fiddle 中看到问题所在。请水平最大化结果框并向下滚动以触发词缀。如您所见，导航栏在右侧增加，我真的看不出这种效果的任何原因。我通过addng暂时解决了问题

 .container

padding-left: 0px;
padding-right: 0px;

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

width: 1140px;

在 #nav.affix 中。但这不是很敏感......我确实尝试了很多方法，但无法获得任何令人满意的结果。你知道是什么原因造成的吗？

编辑

好的，Chrome 的调试器给了我更多信息：在激活 affix 之前，nav-element 获得了类 'affix-top' 等（摘自 chrome-debugger NOT html 源代码！）：

<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。

滚动并触发 affix 后，“affix-top”类变为“affix”，“affix”的大小为：1170px x 52px。

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

【参考方案1】：

你无法解决这个问题。问题是position: fixed;。导航栏将由没有left 或right 属性的浏览器呈现。

你只能通过三件事来解决这个问题：

1.使用绝对定位。

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

2。设置左/右

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

3.定义一个特殊的宽度

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

【讨论】：

谢谢，我想我会更喜欢 max-width-solution :)

【参考方案2】：

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

【参考方案3】：

我无法确认

最小宽度：100%

为我工作。 我使用父 div 的 innerWidth 解决了这个问题。以下示例（包括一个列 - 当然需要放在一个容器和一行中......）：

<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 属性。 我还通过在其调整大小事件中添加处理程序来确保窗口调整大小也会被捕获：

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

享受吧。

【讨论】：

如果附加的 nav 位于不占行全宽的列中，此方法效果最佳。

这是唯一对我有用的方法，可以防止面板在滚动时重新调整为错误的宽度。