Bootstrap 导航栏中心文本

Question

我最近在我的网站上实现了一个折叠引导导航栏。但是，当它处于完整形式时，我有一个问题。文本与导航栏的左侧对齐，尽管有很多 CSS 配置，并且浏览了 stackoverflow，但我尝试过的所有更改都没有成功。 我正在尝试更改导航栏，以便集中其中的文本/链接。

        <div class="navbar-header">
            <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><!-- end navbar-header -->

        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="#home">Home</a>
                    <li><a href="#home">Days Out</a></li>
                    <li><a href="#home">Ghosts</a></li>
                    <li><a href="#home">Beasts</a></li>
                    <li><a href="#home">History</a></li>
                    <li><a href="#home">About Us</a></li>
                    <li><a href="#home">Gifts</a></li>
                    <li><a href="#home">Blog</a></li>
                    <li><a href="#home">Contact Us</a></li>
                </ul>
            </div><!-- end collapse -->
        </div>

Answer 1

您只需要更改导航栏的float 行为，尝试添加以下样式：

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

BootplyDemo

Answer 2

使用媒体查询。这是 Bootstrap 的核心和灵魂。

由于 BS3 折叠导航的默认断点是 767 像素。为什么不定义您希望它在该点之上和之下的行为方式。

一个可能的解决方案是......

@media (min-width:768px) {
 .navbar-collapse {
    text-align:center;
    }
}

@media (max-width:767px) {
 .navbar-collapse {
    text-align:left;
    }
}