html - Bootstrap 4.1 之间的 float 标识

Question

我在 Bootstrap 4 导航中创建了一个 float Logo ，但不幸的是，这打破了“导航栏切换按钮”，这应该在右侧右对齐，但在小屏幕上它位于右侧 Logo 下方。 .

这里是我试过的代码:

.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到一个元素

The element is removed from the normal flow of the document, without creating any space for the element in the outline of the page. It is positioned relative to its closest positioned ancestor, if there is one; otherwise, it is located relative to the initial container block . His final position is determined by the values of top, right, bottom, and left. This value creates a new stacking context when the value of z-index is not auto. Absolutely positioned elements can have margin, and do not collapse with any other margin.

所以当你设置.navbar-brand {position: absolute;}它被删除了文档的正常流程和navbar-toggler是“独生子”.container有 display: flex;和 justify-content: space-between; (这就是为什么当你在 navbar-toggler 里面有其他 child 时 .container 在右边)。

为了避免实际行为，您可以根据您的期望做很多事情。尝试删除 position: absolute从品牌开始，向导航中添加更多元素，以便向右切换，无论如何，解决方案取决于您想要实现的目标。

我希望我能给你一个想法