twitter-bootstrap 如何在 Bootstrap 中居中导航项目？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43738067/
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
How to center nav-items in Bootstrap?
提问by Parker Queen
What if I want to center the nav-items (links) on the navbar according to the browser window size in Bootstrap 4. Take a look at the code:
如果我想根据 Bootstrap 4 中的浏览器窗口大小将导航栏上的导航项（链接）居中怎么办。看一下代码：
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" 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="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
Now I want to center the div "navbar-nav" according to browser width. One thing that I have tried is giving it mr-auto and ml-auto which does seem to center it but not exactly. What it actually does it centers it according to the width "browser window width - logo width" . I want it centered exactly in the middle of the screen.
现在我想根据浏览器宽度将 div“navbar-nav”居中。我尝试过的一件事是给它 mr-auto 和 ml-auto，这似乎确实使它居中，但并不完全如此。它实际执行的操作是根据宽度“浏览器窗口宽度 - 徽标宽度”将其居中。我希望它正好在屏幕中间居中。
I have tried changing position to absolute as well but again that kind of messes up layout in collapsed mode as well.
我也尝试将位置更改为绝对位置，但同样在折叠模式下也会使布局混乱。
回答by Zim
Use the flexbox and margin utils responsively...
响应式地使用 flexbox 和 margin utils...
Bootstrap 4 alpha 6http://codeply.com/go/YvzHvQQRAs(center brand & links)
Bootstrap 4 alpha 6 http://codeply.com/go/YvzHvQQRAs（中心品牌和链接）
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="d-md-flex d-block flex-row mx-md-auto mx-0">
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse mr-auto" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</div>
</nav>
Bootstrap 4.1https://www.codeply.com/go/sTJUthyswN(center brand, align left on mobile)
Bootstrap 4.1 https://www.codeply.com/go/sTJUthyswN（中心品牌，在移动设备上左对齐）
EDIT..
编辑..
The answer is still basically the same. Use mx-autoto center.
答案仍然基本相同。使用mx-auto到中心。
http://codeply.com/go/mycC5z8lpJ(center links, brand left)
http://codeply.com/go/mycC5z8lpJ（中心链接，品牌左侧）
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" 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="navbarNavAltMarkup">
<div class="navbar-nav mx-auto">
<a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
If you want the links exactlycentered in the viewport, see the 2nd example here: http://www.codeply.com/go/RCBftzZCD8
如果您希望链接在视口中完全居中，请参见此处的第二个示例：http: //www.codeply.com/go/RCBftzZCD8
Other Bootstrap 4 Navbar alignment examples
Also see...
另见...
Center an element in Bootstrap 4 Navbar
Center Navbar links without brand pushing it to the right in Bootstrap 4?
How to center navbar in Bootstrap 4 using Flexbox
How to position navbar contents in Bootstrap 4
Bootstrap 4 Navbar align logo center and toggle icon on the left
将 Bootstrap 4 导航栏中的元素
居中
如何使用 Flexbox 在 Bootstrap 4 中居中导航栏
如何在 Bootstrap 4 Bootstrap 4 中定位导航栏内容如何
在左侧对齐徽标中心和切换图标
回答by athi
.navbar-nav .nav-link,
.navbar-brand {
text-align: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwtheitroadesjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" 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="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>回答by Johannes
You can use this CSS:
你可以使用这个 CSS：
#navbarNavAltMarkup {
position: absolute;
text-align: center;
}
#navbarNavAltMarkup > div {
display: inline-block;
width: 100%;
}
#navbarNavAltMarkup > div > a {
display: inline;
}
It makes the container of the menu independent from its parent, gives it full width and aligns the elements inside it in the center.
它使菜单的容器独立于其父级，赋予它全宽度并将其中的元素居中对齐。
