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

Question

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

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

我知道已经有很多关于居中 bootstrap 导航的问题，但 none 似乎同时处理品牌和常规 link。随着时间的推移，文字品牌将被图像取代。谁能告诉我如何将两者居中？提前致谢。

亲切的问候，

斯蒂夫

这是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 {}}

Answer 1

我自己找到了答案。对于遇到此问题的任何人：您可以使用 .navbar-header 代替 .navbar-brand 来移动品牌。祝大家好运

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

Bootstrap+WordPress nav: Center both links and brand

html

css

wordpress

centering

twitter-bootstrap