css - 如何在 wordpress bootstrap 导航中添加 navbar-brand 和元素之间的空间？

Question

我试图将我的品牌放在左侧，并且中间有一点空间，我希望我的导航链接位于右侧。

    <nav class="navbar navbar-expand-md navbar-light bg-faded">
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <a class="navbar-brand" href="#">MY NAVBRAND</a>
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
       <?php
        wp_nav_menu( array(
            'theme_location'    => 'primary',
            'depth'             => 2,
            'container_id'      => 'bs-example-navbar-collapse-1',
            'menu_class'        => 'nav navbar-nav',
            'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
            'walker'            => new WP_Bootstrap_Navwalker())
        );
        ?>
     </div>
   </nav>

现在要做到这一点，我正在尝试将它添加到我的 css 中，以便在 a 标签(具有类 navbar-brand)和 div(具有类折叠)之间留有空间。

  .navbar {
    justify-content: space-between;
   }

但它不起作用，标签和链接紧挨着彼此。

Answer 1

据我了解，您希望导航菜单位于右侧；只需在您的代码中添加 navbar-right 类，如下所示。

   <?php
    wp_nav_menu( array(
        'theme_location'    => 'primary',
        'depth'             => 2,
        'container_id'      => 'bs-example-navbar-collapse-1',
        'menu_class'        => 'nav navbar-nav navbar-right',
        'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
        'walker'            => new WP_Bootstrap_Navwalker())
    );
    ?>