在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。它有助于将 barnd 名称或您需要居中的任何名称居中。所以它可以使用 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>

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

参考图片来自：

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

下面的代码可以用来解决这个问题。通过使用绝对位置。

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

希望对您有所帮助。

遵循此 link 它清楚地说明了您的工作方式。 mx-auto 将导航栏居中 - https://www.codeply.com/go/J9rL11Tf7h 导航栏中心和绝对位置- https://www.codeply.com/go/BC2gFdZ9fb

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

In Bootstrap 4, is it possible to center the navbar brand and align some text to the left of brand?

html

css

center

navbar

bootstrap-4