如何在Bootstrap中将导航项居中显示？

Question

如何在Bootstrap中将导航项居中显示？

7

如果我想在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>

现在我想根据浏览器的宽度使 "navbar-nav" 居中。我尝试过的一件事是给它 mr-auto 和 ml-auto，这似乎确实将其居中了，但不是完全居中。它实际上是根据 "浏览器窗口宽度 - 标志宽度" 居中的。我想要它准确地居中在屏幕中央。

我也尝试过将位置更改为绝对位置，但同样会在折叠模式下搞乱布局。

- Parker Queen

请查看此链接：http://jsfiddle.net/girish28892/bdd9U/1546/，可能对您有用。 - this.girish

3个回答

0

你可以使用这个CSS：

#navbarNavAltMarkup {
  position: absolute;
  text-align: center;
}
#navbarNavAltMarkup > div {
  display: inline-block;
  width: 100%;
}
#navbarNavAltMarkup > div > a {
  display: inline;
}

它使菜单的容器独立于其父级，使其具有完整的宽度，并将其中的元素居中对齐。

https://codepen.io/anon/pen/XRggYY

- Johannes

工作得非常好，直到我注意到在折叠后，导航栏无法在点击切换器时打开。而且，你的笔似乎有一些额外宽度。 - Parker Queen

0

.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-rwoIResjU2yc3z8GV/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>

- athi

实际上，你做的恰恰相反了。当折叠时，你的代码使标志和导航链接居中。我只想在未折叠时将导航项居中。并且我希望它根据浏览器宽度居中。 - Parker Queen

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zim · Accepted Answer

请使用弹性盒子和边距工具进行响应式设计...

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.1 https://www.codeply.com/go/sTJUthyswN（在移动设备上居左对齐，中心品牌）

编辑..

答案基本上还是一样的。使用mx-auto来居中。

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>

如果您希望链接在视口中完全居中，可以参见此处的第二个示例：http://www.codeply.com/go/RCBftzZCD8

其他Bootstrap 4导航栏对齐示例

还可以看看...

在Bootstrap 4 Navbar中居中元素
 在Bootstrap 4中居中Navbar链接而不使品牌向右推
 使用Flexbox在Bootstrap 4中居中Navbar
如何在Bootstrap 4中定位Navbar内容
 Bootstrap 4 Navbar将标志居中并将切换图标放在左侧对齐