css - Bootstrap 4 flexbox 导航，带有居中标志和两侧的元素

Question

我正在尝试创建一个简单的 bootstrap 4 导航导航栏，其中我的 Logo 居中，字体菜单图标左对齐，按钮右对齐。

在我的代码中，我创建了 3 列(5、2 和 5)。如果我删除导航部分，它工作正常，但在导航内，它折叠并且不占用整个宽度。我读到这是因为 bootstrap 4 使用了 flex。我已经尝试将类 w-100 添加到该行，这几乎可以工作，但是它在导航右侧有一个小填充，导致 Logo 不完全居中。

<nav class="navbar bg-dark">
    <div class="row">
        <div class="col-5 text-left bg-warning">
            <a href="" data-toggle="modal" class="navbar-toggler" data-target="#exampleModal"><i class="fas fa-bars text-primary pointer" style="font-size: 28px;" ></i></a>
        </div>
        <div class="col-2 bg-success text-center">
            <a href="/" class="navbar-brand">Logo</a>
        </div>
        <div class="col-5 text-right bg-info">
            <a class="btn btn-primary" href="#" role="button">Sign Up</a>
        </div>
    </div>

有谁知道如何使用 flex 让它工作？我还希望能够在右栏中添加另一个按钮或图标，但 Logo 仍恰好位于屏幕中央。

*************** 更新 **************

我现在已经可以使用 flex 来工作了，但是我不得不添加诸如“flex: 1 0 40%;”之类的样式。到 3 个 div 中的每一个，40% 到左侧和右侧 div，20% 到中间/ Logo div。该代码看起来并不理想，但它确实有效。

<nav class="navbar bg-light">
    <div class="d-flex w-100">
        <div class="my-auto" style="flex: 1 0 40%;">
            <a href="" data-toggle="modal" class="" data-target="#exampleModal"><i class="fas fa-bars text-primary pointer" style="font-size: 28px;" ></i></a>
        </div>
        <div class="text-center" style="flex: 1 0 20%;">
            <a href="/" class="navbar-brand m-0">Logo</a>
        </div>
        <div class="my-auto text-right" style="flex: 1 0 40%;">
            <a class="btn btn-sm btn-watermelon" href="#" role="button">Sign Up</a>

        </div>
    </div>
</nav>

Answer 1

.navbar 类向 nav 元素添加了 padding: .5rem 1rem; 样式规则。 “ Logo ”文本未居中，因为 .navbar-brand class 添加了 margin-right: 1rem; 添加内容到列不会更改大小它的。 将这些类添加到元素中:

<nav class="navbar bg-dark pr-0 pl-0">
...
   <a href="/" class="navbar-brand m-0">Logo</a>
...
</nav>

pl-0 和 pr-0 类会将左右填充设置为 0，而 m-0 将删除所有边距。

这是一个非常好的cheat-sheat for bootstrap 4