时间戳

首页 > 解决方案 > Bootstrap 4 flexbox 导航，带有居中的徽标和两侧的项目

css - Bootstrap 4 flexbox 导航，带有居中的徽标和两侧的项目

问题描述

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

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

<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 让它工作？我还希望能够在右栏中添加另一个按钮或图标，但仍将徽标恰好位于屏幕中央。

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

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

<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>

标签： csstwitter-bootstrapflexbox

解决方案

该类.navbar将padding: .5rem 1rem;样式规则添加到 nav 元素。“徽标”文本未居中，因为 ,.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>

该类将左右填充设置为0，同时pl-0将删除所有边距。pr-0m-0

这是引导程序 4 的一个非常好的备忘单

推荐阅读