Bootstrap粘性导航在粘性时无法在容器外部溢出？

Question

我正在尝试在Bootstrap中获得一个粘性导航栏，以使其正确显示。当“松开”时，它们都可以放入容器中。当“卡住”徽标被插入时，这将导致其包装，因为容器对于所有元素来说都很小。

我正在尝试将徽标li元素插入导航栏容器的左侧，以解决包装问题，但没有成功。

URL：https://lasereyestage.wpengine.com/

相关代码（在容器div内）：

<div class="navbar-collapse collapse" id="navbar3" aria-expanded="false" style="height: 1px;">
    <ul class="nav navbar-nav locked" id="navbar">
        <li class="home-link">
            <a href="https://lasereyestage.wpengine.com/">
                    <img src="/wp-content/themes/lasereyeinstitute/images/logo_small.png" alt="Laser Eye Institute" id="lei" class="logo-hide" style="display: inline;">
            </a>
        </li>
        <li id="menu-item-137" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-137"><a href="https://lasereyestage.wpengine.com/our-story/">Our Story</a></li>
       [...]
    </ul>
</div>

CSS将li> home链接放置在容器外部（卡住时有效，但未卡住则偏移并破坏导航

.home-link{margin-left:-100px;}

• 我是否只有在卡住时才有条件地应用负边距？
• 有没有更好的方法来做到这一点而没有负边距？
• 我应该完全不这样做，而是找到一种将其全部放入容器中的方法，而不是试图脱离容器吗？

Answer 1

您正在尝试将2米长的棒子放入1米长的盒子中。不适合
浏览器通过将木棒切成2条1米的木棒来帮助您，现在可以了，但最终却得到2条。

如果您不想切碎木棍，则有两种选择：

• 得到一个更大的盒子
• 换一根小棍子

更大的盒子

通过将.navbar移到.container之外，可以得到更大的盒子 您可能需要在不粘时添加一些填充/边距。并在粘滞时将其删除。使它平稳过渡的加分点。

或者拿一个较小的棍子；

将菜单项重新排列为子菜单，引导程序在导航栏中支持dropdowns。 您可以在栏不粘时隐藏子菜单，并在粘时显示它们。

Answer 2

减小粘贴时的字体大小。边距和填充相同。

由于使用了引导程序，因此无需给出明确的高度和宽度。它应该是自动的。

为什么不使用全宽粘性

  

我是否仅在卡住时才有条件地应用负边距？

不。您不应应用明确的保证金。在您的屏幕上可能效果不错，但在不同尺寸的屏幕上可能效果不佳。

  

有没有更好的方法来做到这一点而没有负边距？

使用全屏宽度。

  

我是否应该完全不这样做，并找到一种适合所有条件的方法   容器而不是尝试脱离容器？

应用字体大小修复程序，这很对劲。但是我的建议是制作两个不同的导航栏菜单，一个用于移动设备，一个用于桌面。所以他们不会彼此混乱。