在Bootstrap 4中，是否可以将导航栏品牌居中并在品牌左侧对齐一些文本？

Question

我是网站编码的新手，也是Bootstrap的新手。我试图将品牌在导航栏中居中，并在品牌左侧对齐文本。但是，每次我尝试时，都会同时关注品牌和文字。我希望品牌始终处于中间地位。

<nav class="navbar navbar-expand-md flex-column">
    <div class="container justify-content-center flex-row navbar-expand-md">
        <a href="/index.html" class="navbar-brand">VIRAL BEAUTY</a>
        <h4>Beauty Products As Seen On YouTube</h4>
    </div>
</nav>

-

nav{
  height: 6vh
}

.navbar-brand{
  border: 2px #FA5DB1 solid;
  padding: 5px 10px;
}

.navbar-brand:hover{
  text-decoration: none;
  color: #FA5DB1;
  cursor: pointer;
}

.navbar a{
  text-decoration: none;
  color: #FA5DB1;
  font-weight: 500;
}

.navbar h4{
  font-size: 12px;
  margin: 0;
}

PS：我不确定如何粘贴代码，以致歉意。

Answer 1

在Bootstrap 4中，导航栏正在使用 flexbox 。它有助于居中名称或任何需要居中的名称居中。因此可以使用mx-auto将其居中。然后，左右菜单将不需要浮点数。

 <nav class="navbar navbar-expand-md navbar-fixed-top navbar-dark bg-dark main-nav">
    <div class="container">
        <ul class="nav navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">products</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Hair products</a>
            </li>
        </ul>
        <ul class="nav navbar-nav mx-auto">
            <li class="nav-item"><a class="nav-link" href="#">VIRTUAL BEAUTY</a></li>
        </ul>
        <ul class="nav navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Services</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Blog</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact Us</a>
            </li>
        </ul>
    </div> </nav>

这将为您提供导航栏，如下图所示。

来自Center an element in Bootstrap 4 Navbar

的参考图片

在这里您可以看到实际的视口中心与品牌名称所在的中心不同。那是因为它在导航栏的左端和右端分别居中。

以下代码可用于克服此问题。通过使用绝对位置。

.abs-center-x {
    position: absolute;
    left: 50%;
    transform: translateX(-50%); }

希望这会有所帮助。

关注此链接它清楚地说明了您的工作方式。 MX自动将导航栏居中-https://www.codeply.com/go/J9rL11Tf7h 导航栏中心和绝对位置-https://www.codeply.com/go/BC2gFdZ9fb