twitter-bootstrap Bootstrap 4 导航栏对齐徽标中心并在左侧切换图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50911189/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4 Navbar align logo center and toggle icon on the left
提问by Md Faysal Ahmed Akash
i want to make the logo centered and links on the left side in the navbar and when they collapse in small devices the toggle button should appear in the left side,here appears on the right side and the logo should be fixed(no collapse)
我想让徽标居中，链接位于导航栏中的左侧，当它们在小型设备中折叠时，切换按钮应出现在左侧，此处出现在右侧，徽标应固定（不折叠）
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
采纳答案by Zim
The Bootstrap 4 Navbar uses flexbox, so it's possible to achieve this without extra CSS. You will need an empty spacer div to keep the logo centered.
Bootstrap 4 Navbar 使用 flexbox，因此无需额外的 CSS就可以实现这一点。您将需要一个空的间隔 div 来保持徽标居中。
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="collapse navbar-collapse w-100 order-1 order-lg-0" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="d-flex w-100 order-0">
<div class="w-100">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<a class="navbar-brand text-center w-100" href="#">Navbar</a>
<span class="w-100"></span>
</div>
<span class="w-100"></span>
</nav>
Toggler left, brand center:
https://www.codeply.com/go/VfuMAtIoXi
Toggler 左，品牌中心：https ://www.codeply.com/go/VfuMAtIoXi
Related:
How to center nav-items in Bootstrap?
Bootstrap NavBar with left, center or right aligned items
回答by Matt
Sure, sorry about that, I should have added it earlier. So basically what we are doing is moving the .navbar-brand to the middle giving it the parameter of 0 auto, and adjusting the .navbar-collapse (so the items of our menu) to the left, giving 10px space from the top of the nav. Then with a media query, which will start to work only at 767px, we cetralize the .navbar-brand, so it will be always in the middle, we now adjust the .navbar-toggler (menu icon) as we did erlier with the menu items, whic now are getting the default position giving them the following style: position: inherit; then I have also modified the navbar-expand-sm class to navbar-expand-md in order to change the breakpoint
当然，抱歉，我应该早点添加它。所以基本上我们正在做的是将 .navbar-brand 移动到中间给它 0 auto 的参数，并将 .navbar-collapse（所以我们菜单的项目）调整到左边，从顶部给它 10px 的空间导航 然后使用仅在 767px 开始工作的媒体查询，我们将 .navbar-brand 集中化，因此它将始终位于中间，我们现在调整 .navbar-toggler（菜单图标），就像我们对菜单项，现在获得默认位置，赋予它们以下样式：位置：继承；然后我还将 navbar-expand-sm 类修改为 navbar-expand-md 以更改断点
.navbar-brand {
margin: 0 auto;
}
.navbar-collapse {
position: absolute;
top: 10px;
}
@media (max-width: 767px) {
.navbar-brand {
text-align: center;
}
.navbar-toggler {
position: absolute;
top: 10px;
}
.navbar-collapse {
position: inherit;
}
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-md navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Features</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li>
<li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li>
</ul>
</div>
</nav>