Question

我在WordPress模板上使用Bootstrap，我希望将导航内容集中在一起。我正在使用标准的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 {}}

Answer 1

我自己找到了答案。对于任何绊脚石的人：你可以使用.navbar-header来移动品牌而不是.navbar-brand。祝你好运

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

1 个答案: