将导航栏切换按钮向右对齐

Question

我正在尝试使用 Bootstrap 4，更具体地说是导航栏菜单。有没有一种方法可以让小导航栏切换按钮与页面右侧对齐，而不是让它浮动到徽标旁边的左侧？

这是我当前的代码。

 @media (min-width: 992px) {
    .navbar-nav li a { line-height: 85px; }
}

@media (max-width: 991px) {
    .navbar-brand { float: none; }
}

.navbar-toggler{
    border:none;
    width:1em;
}

  <nav class="navbar navbar-light bg-faded navbar-full">
          <a class="navbar-brand" href="#"><img class="img-fluid" src="img/logoMedium.png" /></a>
          <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
          <div class="collapse navbar-toggleable-md" id="navbarResponsive">
              <ul class="nav navbar-nav">
                  <li class="nav-item active">
                      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="#">About Us</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="#">Solar Power</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="#">No Obligation Quote</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="#">Contact Us</a>
                  </li>
              </ul>
          </div>
      </nav>

谢谢您的帮助 ：）

原文由 user3599852 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

只需将类 ml-auto 添加到你的切换按钮，这样你就可以制作 margin-left:auto

 <button type="button" class="navbar-toggler ml-auto hidden-sm-up float-xs-right" data-toggle="collapse" data-target="#navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>

原文由 Sergey Solovyov 发布，翻译遵循 CC BY-SA 3.0 许可协议