Question

我已经在Bootstrap 4导航中创建了一个浮动徽标，但不幸的是，这打破了“导航栏切换按钮”的作用，该灵魂右对齐，但是在小屏幕上，它位于右侧徽标下方。

这是我尝试过的代码：

.navbar-brand {
  position: absolute;
  padding-top: 100px;
}

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand abs" href="#"><img src="assets/img/logo.png" alt=""></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar1" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse justify-content-end" id="navbar1">
            <ul class="navbar-nav text-right">
                <li class="nav-item active">
                    <a class="nav-link" href="#">lorem<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">lorem</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Ipsum</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">lorem</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Answer 1

将position: absolute设置为元素时

该元素已从常规文档流中删除，而没有在页面轮廓中为该元素创建任何空间。如果有一个，则相对于其最接近的祖先进行定位。否则，它相对于初始容器块定位。他的最终位置取决于top，right，bottom和left的值。当z-index的值不是auto时，此值将创建新的堆叠上下文。绝对定位的元素可以有边距，并且不能与其他任何边距折叠。

因此，当您设置.navbar-brand {position: absolute;}时，文档的常规流程将被删除，并且navbar-toggler是具有.container和{{1}的唯一子项display: flex; }（这就是为什么在justify-content: space-between;中有另一个孩子的情况下，navbar-toggler在右边的原因。）

为避免实际行为，您可以根据自己的期望做很多事情。尝试从品牌中删除.container，在导航中添加更多元素，以使切换到右侧，无论如何，解决方案取决于您要实现的目标。

我希望我给你一个主意

Bootstrap 4.1浮动徽标之间

1 个答案: