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

Question

我正在尝试让 Bootstrap 中的粘性导航栏正确显示。当“未卡住”时，它全部放入容器内。当“卡住” Logo 被插入时，这会导致它换行，因为容器对于所有元素来说都太小了。

我试图将 Logo li 元素插入到导航栏容器的左侧以解决环绕问题，但没有成功。

网址: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>

将 li>home-link 定位在容器外部的 CSS(卡住时有效，但在未卡住时偏移并破坏导航

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

• 我是否应该仅在卡住时才有条件地应用负边距？
• 有没有更好的方法来做到这一点而不会产生负利润？
• 我是不是应该根本不这样做，而是想办法将它们全部装入容器中，而不是试图打破容器？

Answer 1

您正试图将 2 米长的棍子放入 1 米长的盒子中。它不适合。
浏览器帮助您将棍子切成 2 根 1 米长的棍子，现在它适合了，但您最终得到了 2 根棍子。

如果你不想砍断棍子，你有两个选择:

• 买一个更大的盒子
• 拿一根小一点的棍子

更大的盒子

您可以通过将 .navbar 移到 .container 之外来获得更大的框当它不粘时，您可能想要添加一些填充/边距。并在它粘住后将其移除。使其顺利过渡的加分项。

或者换一根小一点的棍子；

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