【问题标题】:Bootstrap Navbar Center TextBootstrap 导航栏中心文本
【发布时间】:2015-03-24 21:25:15
【问题描述】:

我最近在我的网站上实现了一个折叠引导导航栏。但是,当它处于完整形式时,我有一个问题。文本与导航栏的左侧对齐,尽管有很多 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>

【问题讨论】:

    标签: css twitter-bootstrap text center navbar


    【解决方案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,如果这样可以更轻松地查看实际问题
    猜你喜欢
    • 1970-01-01
    • 2014-02-22
    • 2017-05-08
    • 1970-01-01
    • 2014-11-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多