将引导程序 4 导航栏居中（包括品牌和链接）[重复]答案

【问题标题】：Center a bootstrap 4 navbar (including brand and links) [duplicate]将引导程序 4 导航栏居中（包括品牌和链接）[重复]
【发布时间】：2018-07-16 06:09:24
【问题描述】：

我有点难以将我网站的导航栏（包括品牌和链接）居中，因为我更像是后端而不是前端。

代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
    <ul class="navbar-nav mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

我想要什么

我知道我可以使用 m-auto 使链接居中，但品牌（具有作为徽标的图像）会留在左侧，我似乎无法弄清楚如何将其与链接居中（在一种好/干净的方式）。

谢谢。

引用为重复的链接都没有帮助我。我需要品牌标志和中间的链接，ZimSystem 提供的链接只做一个没有另一个。

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

.brand-wrapper{
   width:100%;
}


.navbar-toggler{
float:left;
}



@media(max-width: 767px){

.navbar-brand{
 left:50%;
 position:absolute;
 transform: translate(-50%);
}

 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  

    <div class="brand-wrapper">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
    <a class="navbar-brand" href="#">Brand</a>
    </div>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
    <ul class="navbar-nav mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link text-center" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-center" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-center disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

【讨论】：

这不是只集中在移动端吗？我说的是普通视图（桌面等）：/

【解决方案2】：

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<head>
<style>
li{
text-align:center;
border:2px solid white;
}
li:hover{
background-color:silver;
box-shadow:inset 0px 3px 5px 0px grey;
color:white;
font-weight:bold;
}
.navbar-brand{
float:left !important;
}
</style>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  
  <a class="navbar-brand" href="#">Your Brand</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
    <ul class="navbar-nav mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

</body>
</html>

请尝试

【讨论】：

我觉得这是为移动设备中间操作导航的正确方法，如果品牌名称很大，如果你愿意，你可以删除 css brand-nav{ float:left;}
我不确定这是否有效..
我不明白你想说什么