Bootstrap 导航栏中心文本

Posted 2023-03-29

【中文标题】Bootstrap 导航栏中心文本

【英文标题】：Bootstrap Navbar Center Text

【发布时间】：2015-03-24 21:25:15

【问题描述】：

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

        <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>

【参考方案1】：

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

.navbar-collapse 
  text-align:center;

.navbar-nav 
    display:inline-block;
    float:none;

BootplyDemo

【讨论】：

我已经包含了一个 jsfiddle jsfiddle.net/b8yjgk6a 因为你可以看到它只有当屏幕比导航栏本身大时，才会将文本放在左侧，并拉伸导航栏穿过容器。当屏幕变大时，有没有办法让它居中显示文本？我已尝试在媒体中为大屏幕编辑您提供的代码，但无济于事

@AdamFenwick 在你的小提琴中不起作用，因为 bootstrap 的 css 会覆盖所有其他 css，因为 jsfiddle 的工作方式允许......但如果你使用正确的特异性，它会起作用

我将如何更改它以使其覆盖引导程序？到目前为止，我已经在上面实现了您的代码，但是一旦达到特定大小（我的监视器），导航栏将继续填充容器，但是文本仍然与左侧对齐

@AdamFenwick 尝试将 !important 放在 text-align:center; 之后；

@RachelGallen 折叠时文本显示为居中，但在完整导航栏中却没有

【参考方案2】：

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

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

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

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


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

【讨论】：

我已经尝试在大屏幕上使用媒体查询，但是当导航没有折叠时，文本仍然不会居中。该网站位于 adamfenwickweb.co.uk，如果这样可以更轻松地查看实际问题