将导航栏切换按钮向右对齐 [英] Align navbar toggle button to the right

问题描述

我正在玩Bootstrap 4，更具体地说是导航栏菜单.有没有一种方法可以使导航栏的小按钮位于页面右侧，而不是使其浮动在徽标旁边的左侧?

I'm having a play around with Bootstrap 4, more specifically the navbar menu. Is there is a way I can make the little navbar toggle button align to the right of the page rather than have it floating to the left next to the logo?

这是我当前的代码.

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

感谢您的帮助:)

推荐答案

只需将类ml-auto添加到切换按钮 这样，您可以使margin-left:auto

just add the class ml-auto to your toggle button in that way you make 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>

这篇关于将导航栏切换按钮向右对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！