Bootstrap+WordPress 导航：将链接和品牌居中答案

【问题标题】：Bootstrap+WordPress nav: Center both links and brandBootstrap+WordPress 导航：将链接和品牌居中
【发布时间】：2016-09-21 22:28:06
【问题描述】：

我在 WordPress 模板上使用 Bootstrap，我想将导航的内容居中。我正在使用标准的引导导航。

我已成功将链接居中，但该品牌绝对拒绝移动。我确实希望该品牌留在链接列表之外，以便它在手机上仍然可见。

我知道已经有很多关于居中引导导航的问题，但似乎没有一个涉及品牌和常规链接。随着时间的推移，文字品牌将被图像取代。谁能告诉我如何使两者居中？提前致谢。

亲切的问候，

史蒂夫

这里是html/php

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
    <div class="container">
<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
<a class="navbar-brand" href="#top">Blue Iguana</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
    <?php
    wp_nav_menu( array(
        'theme_location' => 'top_menu',
        'depth' => 2,
        'container' => false,
        'menu_class' => 'nav navbar-nav',
        'fallback_cb' => 'wp_page_menu',
        //Process nav menu using our custom nav walker
        'walker' => new wp_bootstrap_navwalker())
    );
    ?>
</div><!-- /.navbar-collapse -->

这是CSS

@media (min-width: 768px) {
.navbar .navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: top;
}

.navbar .navbar-collapse {
    text-align: center;
}

.navbar-brand {}}

【问题讨论】：

标签： html css wordpress twitter-bootstrap centering

【解决方案1】：

我自己找到了答案。对于任何偶然发现此问题的人：您可以使用 .navbar-header 而不是 .navbar-brand 来移动品牌。祝大家好运

【讨论】：