Question

您只想知道使用此代码的原因

.navbar .navbar-nav {
    display: inline-block;
    float: none;
}
.navbar .navbar-collapse {
    text-align: center;
}

使导航栏成为其元素的中心，而不是像＃ - p>那样制作新的CSS样式

.navbarAlign {
    display: inline-block;
    float: none;
    text-align: center;
}

并将其放入nav元素的类

</div>
    <nav class="navbar navbar-inverse -----> navbarAlign"> <-----
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="https://www.google.com" target="blank">VirusFun</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1 ">
          <ul class="nav navbar-nav">
            <li></li>
          </ul>
          <ul class="nav navbar-nav navbar-center">
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
..........

Answer 1

如果你想得到正确答案，那么如果你清楚地问它会更好如果您想集中导航中的内容，您应该使用：

.navbar {
  text-align: center;
}

因为导航栏是父级，你在里面定义的对齐方式会对所有元素产生影响。

但是如果你想在页面中集中导航栏本身使用：

.navbar {
  display: flex;
  align-items: center;
  justify-content: center;
}

希望它可以帮助你：）

Bootstrap 3导航栏中心

1 个答案: