如何在 navbar-brand 和 wordpress 引导导航中的项目之间添加空格？

Posted 2023-03-21

【中文标题】如何在 navbar-brand 和 wordpress 引导导航中的项目之间添加空格？

【英文标题】：how to add space between navbar-brand and items in wordpress bootstrap navigation?

【发布时间】：2018-07-18 14:55:12

【问题描述】：

我试图将我的品牌放在左侧，中间留出一点空间，我希望我的导航链接放在右侧。

    <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;
   

但它不起作用，并且标签和链接彼此相邻。

【参考方案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())
    );
    ?>