Bootstrap居中整个导航栏

Question

所以我用Google搜索并试图在过去一小时内解决这个问题，我开始有点不高兴。

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

让它的所有内容都看起来像这样（在paint中制作，哈哈。）：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

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

npm install

我只添加了<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> 然后，一些css规则必须针对大于768px的维度进行修改（如果保持不变则相同）。这是我制作的截图：