Bootstrap 4 HTML 导航栏图标文本

Question

伙计们，我正试图绕过导航栏，但我这辈子都无法解决这个问题

我使用下面的代码来制作导航栏

<!-- Fixed navbar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header"> 
  <button type="button" class="navbar-toggle navbar-toggler-right custom-toggler" style="color: rgb(255, 255, 255); align-self: auto;" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    Menu<span class="navbar-toggler-icon"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">Barr Custom Printing</a>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

  <ul class="nav navbar-nav navbar-right">

      <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown"  role="button" aria-haspopup="true" aria-expanded="false">Garments <span class="caret"></span></a>         
    <ul class="dropdown-menu">
      <li><a href="tshirt.html">T-Shirt</a></li>
      <li><a href="sweatshirt.html">Sweatshirt</a></li>
      <li><a href="polo.html">Polo Shirt</a></li>
      <li><a href="hoodies.html">Hoodies</a></li>
      <li><a href="vest.html">Sports Vests</a></li>
      <li><a href="oversize.html">Oversize</a></li>
      <li><a href="organic.html">Organic</a></li>
      <li><a href="sublimation.html">Sublimation</a></li>


    </ul>
    </li>
    <li><a href="pricing.html">Pricing</a></li>
    <li><a href="contactus.html">Contact Us</a></li>
    </ul>

     </div><!-- /.navbar-collapse -->
     </div><!-- /.container-fluid -->
     </nav>

这会在左侧生成以下图像

任何想法我如何让它看起来像右边的那个

我尝试过使用 CSS，但不知道该尝试什么

感谢任何帮助

标记

Answer 1

原来如此。我使用 flexbox 来对齐项目。

只需添加以下html

<!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header"> 
  <button type="button" class="navbar-toggle navbar-toggler-right custom-toggler" style="color: rgb(255, 255, 255); align-self: auto;" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
  <span class="text">Menu</span>
  <div class="iconWrapper">
    <span class="navbar-toggler-icon">     </span>

    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </div>

  </button>
  <a class="navbar-brand" href="#">Barr Custom Printing</a>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->

还有下面的css：-

.custom-toggler {
  display: flex;
  align-items: center;
}

.text {
  margin-right: 10px;
}

活生生的例子：-

https://jsfiddle.net/DTcHh/67566/