Bootstrap 将整个导航栏居中

Question

所以在过去的一个小时里，我用谷歌搜索并试图解决这个问题，但我开始有点不高兴了。

我需要这个导航栏（目前左边有它的全部内容）：navbar left

使其所有内容居中，看起来像这样（用油漆制作，哈哈。）：navbar center edit

我找到的唯一解决方案是让导航链接居中但没有品牌，或者让品牌居中但没有导航链接。

HTML:

    <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-header ">
        <a class="navbar-brand" href="#">SOUND HAUS</a>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li><a href="/articles" style="color:#fff;">ARTICLES</a></li>
            <li><a href="/interviews" style="color:#c00618;">INTERVIEWS</a></li>
            <li><a href="/gallery" style="color:#fff;">GALLERY</a></li>
            <li><a href="/contact" style="color:#c00618;">CONTACT</a></li>
        </ul>
    </div>
</nav>

CSS:

.navbar {
    font-family: Long Shot;
    background-color: black;
    z-index: 998;
}

.navbar-brand {
    font-size: 50px;
    margin-top: 20px;
    color: white !important;
}

.navbar-nav {
    margin-top: 20px;
    font-size: 20px;
}

提前致谢！

Answer 1

您应该在导航中放置一个容器，然后覆盖并添加一些 css 规则到 bootstrap 规则。

<style>
.container.nav{
  text-align:center
}
.navbar {
    font-family: Long Shot;
    background-color: black;
    z-index: 998;
}

@media (min-width: 768px){
.navbar-header{
  max-width: 400px;
  display: inline-block;
}

.navbar-header {
     float: none;
  }

}

@media (min-width: 768px){
.navbar-collapse.collapse{
  max-width: 600px;
  display: inline-block;
}

.navbar-collapse.collapse {
    display: inline-block !important;
  }
}


.navbar-brand {
    font-size: 50px;
    margin-top: 20px;
    color: white !important;
}

</style>


<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container nav">
      <div class="navbar-header ">
          <a class="navbar-brand" href="#">SOUND HAUS</a>
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
          </button>
      </div>
      <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
              <li><a href="/articles" style="color:#fff;">ARTICLES</a></li>
              <li><a href="/interviews" style="color:#c00618;">INTERVIEWS</a></li>
              <li><a href="/gallery" style="color:#fff;">GALLERY</a></li>
              <li><a href="/contact" style="color:#c00618;">CONTACT</a></li>
          </ul>
      </div>
      </div>
  </nav>

我只添加了 div class="container nav" 然后一些 css 规则必须针对大于 768px 的尺寸进行修改（如果保持不变）。这是我制作的屏幕截图：

Bootstrap 将整个导航栏居中

Bootstrap Centering Entire Navbar

html

css

nav

navbar

twitter-bootstrap