在屏幕右侧显示 bootstrap 4.4 导航栏内容

Question

我需要在我的 bootstrap 4 导航栏中添加一些图标，并且我需要这些图标显示在菜单切换器汉堡按钮下，这些图标是链接到 woocommerce 帐户页面的帐户图标，一个购物车图标仅当购物车中有商品和翻译插件的标志时才会显示徽章。我已经尝试实现我的目标，即 text-right boostrap 类、float-right 和 justify-content-end，但这些类都不会将内容放在屏幕右侧的切换按钮下。我的代码有修复吗？

  <nav class="navbar fixed-top bs-nav">
    <div class="container-fluid navbar-inner">
      <div class="navbar-header">
        <a class="navbar-brand" href="<?php bloginfo('url'); ?>">
        <?php $logo = wp_get_attachment_image_src( get_theme_mod('custom_logo'), 'full' ); ?>
        <?php if( $logo ): ?>
          <img class="navbar-logo" src="<?php echo $logo[0]; ?>" id="" width="auto" height="60">
        <?php endif; ?>
        </a>
      </div>
      <div class="row">
        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0;">
          <!-- Search icon - beta-->
          <!-- <a class="nav-search-icon" href="#searchForm" data-toggle="modal">
            <i class="fas fa-search"></i>
          </a> -->
          <!-- Hamburger menu button -->
          <button class="hamburger hamburger--spin" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbar-content" aria-expand="false" aria-label="<?php _e('Toggle Navigation'); ?>">
            <span class="hamburger-box">
            <span class="hamburger-inner"></span>
            </span>
          </button>
        </div>
      </div>
    </div>
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0;">
          <!-- Menu cart icon -->
          <?php $items = WC()->cart->cart_contents_count; ?>
          <a class="cart-contents" href="<?php echo wc_get_cart_url(); ?>">
            <i class="fas fa-shopping-cart"></i>
            <?php if( $items > 0 ): ?>
              <span class="badge badge-pill badge-danger cart-menu-badge"><?php echo $items; ?></span>
            <?php endif; ?>
          </a>
          <!-- account icon -->
          <a class="nav-account-icon" href="<?php echo wc_get_page_permalink( 'myaccount' ); ?>">
            <i class="fas fa-user"></i>
          </a>
          <!-- translate flags -->
          <?php echo do_shortcode('[gtranslate]'); ?>
        </div>
      </div>
    </div>

      <div class="collapse navbar-collapse navbar-content" id="navbar-content">
        <div class="container">
          <div class="row">
            <div class="col-sm-12 col-md-12 col-lg-12">

              <?php
                wp_nav_menu( array(
                    'theme_location' => 'header-menu',
                    'menu'        => 'Menu',
                    'container'      => false,
                    'depth'          => 2,
                    'menu_class'     => 'navbar-nav ml-auto',
                    'walker'         => new Bootstrap_NavWalker(),
                    'fallback_cb'    => 'Bootstrap_NavWalker::fallback',
                ) );
              ?>
            </div>
          </div>
        </div>
      </div>
  </nav>

我正在使用侧面板菜单，因此只有在用户单击导航栏切换按钮时才会显示这些项目。任何建议将不胜感激。

Answer 1

尝试将所有图标添加到与汉堡包相同的容器中。并使用 class col 定位图标