将导航栏内容居中 Bootstrap 4 (alpha 5)
Centering the navbar content in Bootstrap 4 (alpha 5)
我正在尝试将导航栏内容集中在 Bootstrap 4,alpha 5 中。我一直在谷歌搜索,我想可能有一些技巧涉及 d-block
和 mx-auto
.
但是我无法找到如何使导航链接居中以便它们完全居中,而不仅仅是在它们周围添加一个容器。
我正在玩的示例导航栏代码:.
<nav class="navbar navbar-light bg-faded">
<ul class="nav navbar-nav">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</nav>
在 Bootstrap 4 中使导航栏项目居中更简单,并且不需要额外的标记。
<nav class="navbar navbar-expand-md navbar-light bg-faded">
<ul class="navbar-nav mx-auto">
<li class="nav-item active text-center">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown text-center">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</nav>
Bootstrap 4 Center Navbar Demo(更新为 v4.0.0)
如果您只需要将特定元素居中,例如品牌或链接,
您不需要使用 css 来完成此操作,因为 bootsrap 的“mx-auto”class 可以为您处理。您只需将以下内容添加到您的 ul class:
关于 boostraps 文档中水平居中的更多信息:https://getbootstrap.com/docs/4.4/utilities/spacing/
我正在尝试将导航栏内容集中在 Bootstrap 4,alpha 5 中。我一直在谷歌搜索,我想可能有一些技巧涉及 d-block
和 mx-auto
.
但是我无法找到如何使导航链接居中以便它们完全居中,而不仅仅是在它们周围添加一个容器。
我正在玩的示例导航栏代码:.
<nav class="navbar navbar-light bg-faded">
<ul class="nav navbar-nav">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</nav>
在 Bootstrap 4 中使导航栏项目居中更简单,并且不需要额外的标记。
<nav class="navbar navbar-expand-md navbar-light bg-faded">
<ul class="navbar-nav mx-auto">
<li class="nav-item active text-center">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown text-center">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</nav>
Bootstrap 4 Center Navbar Demo(更新为 v4.0.0)
如果您只需要将特定元素居中,例如品牌或链接,
您不需要使用 css 来完成此操作,因为 bootsrap 的“mx-auto”class 可以为您处理。您只需将以下内容添加到您的 ul class:
关于 boostraps 文档中水平居中的更多信息:https://getbootstrap.com/docs/4.4/utilities/spacing/