时间戳

首页 > 解决方案 > Bootstrap4：为什么另一个行单元格左对齐，尽管 mx-auto 不居中？

html - Bootstrap4：为什么另一个行单元格左对齐，尽管 mx-auto 不居中？

问题描述

我正在尝试在 Bootstrap4 中创建一个响应式标头。目的是在视口较大时创建左对齐 LOGO（文本）和右对齐菜单，然后在缩小到“小”视口时，两者都居中。

这是我到目前为止所拥有的：

    <nav class="navbar navbar-light bg-white no-gutters py-0 border-bottom">
        <div class="nav col-sm-6 bg-secondary">
            <DIV class="mx-auto">
              <a class="navbar-brand text-light p-2 h3" href="#">LOGO</a>
            </DIV>
        </div>
        <div class="col-sm-6">
           <ul class="nav mx-auto float-sm-right text-dark bg-success">
            <li class="nav-item"><a class="nav-link p-2" href="#">Menu1</a></li>
            <li class="nav-item"><a class="nav-link p-2" href="#">Menu2</a></li>
            <li class="nav-item"><a class="nav-link p-2" href="#">Menu3</a></li>
          </ul>
        </div>
    </nav>

注意：请忽略可怕的背景，我正在使用它们来调试网格的响应能力以及在哪个元素上粘贴实用程序。

一切看起来都在宽阔的视口上。但是当我缩小宽度时，LOGO 居中，但菜单跳转到 LEFT 对齐。我已经在它上面的行（在 DIV 中）尝试了 mx-auto，但没有观察到行为变化。

我哪里做错了？

标签： htmlcssbootstrap-4flexbox

解决方案

您可以使用 d-flex justify-content-center 类使菜单项居中对齐。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-light bg-white no-gutters py-0 border-bottom">
        <div class="nav col-sm-6 bg-secondary">
            <div class="mx-auto">
              <a class="navbar-brand text-light p-2 h3" href="#">LOGO</a>
            </div>
        </div>
        <div class="col-sm-6">
           <ul class="nav mx-auto d-flex justify-content-center float-sm-right text-dark bg-success">
            <li class="nav-item"><a class="nav-link p-2" href="#">Menu1</a></li>
            <li class="nav-item"><a class="nav-link p-2" href="#">Menu2</a></li>
            <li class="nav-item"><a class="nav-link p-2" href="#">Menu3</a></li>
          </ul>
        </div>
    </nav>

推荐阅读