在 Bootstrap 4 (alpha 5) 中居中导航栏内容 [英] Centering the navbar content in Bootstrap 4 (alpha 5)

问题描述

我试图在 Bootstrap 4, alpha 5 中将导航栏内容居中.我一直在谷歌搜索，我想可能有一些涉及 d-block 和 mx- 的技巧自动.

但是我不知道如何将导航链接居中，使它们完全居中，而不仅仅是在它们周围添加一个容器.

我正在使用的示例导航栏代码:.

<ul class="nav navbar-nav"><li class="nav-item active"><a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a><li class="nav-item"><a class="nav-link" href="#">功能</a><li class="nav-item"><a class="nav-link" href="#">定价</a><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">下拉链接</a><div class="下拉菜单" aria-labelledby="navbarDropdownMenuLink"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">另一个动作</a><a class="dropdown-item" href="#">这里还有别的东西</a>

</nav>

JSFiddle，如果你喜欢

解决方案

在 Bootstrap 4 中居中导航栏项目更简单，并且不需要额外的标记.

<ul class="navbar-nav mx-auto"><li class="nav-item active text-center"><a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a><li class="nav-item text-center"><a class="nav-link" href="#">功能</a><li class="nav-item text-center"><a class="nav-link" href="#">定价</a><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">下拉链接</a><div class="下拉菜单" aria-labelledby="navbarDropdownMenuLink"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">另一个动作</a><a class="dropdown-item" href="#">这里还有别的东西</a>

</nav>

Bootstrap 4 中心导航栏演示(针对 更新v4.0.0)

如果您只需要将特定元素(例如品牌或链接)置于中心，请参阅此答案

I am trying to center the navbar content in Bootstrap 4, alpha 5. I have been googling a bit, and I guess there might be some trick involving d-block and mx-auto.

However I cannot find out how to center the navigation links so that they are total in center, not just adding a container around them.

Sample navbar code I am playing with:.

<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>

JSFiddle if you like

解决方案

Centering Navbar items is simpler in Bootstrap 4, and doesn't require additional markup.

<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 (updated for v4.0.0)

If you need to center only specific elements, such as the Brand or Links, see this answer

这篇关于在 Bootstrap 4 (alpha 5) 中居中导航栏内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！