Bootstrap 4 - 将navbar切换按钮向右对齐 [英] Bootstrap 4 -- Align navbar toggle button to the right

问题描述

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

snippetdata-lang =jsdata-hide =falsedata-console =truedata-babel =false>

  @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-light bg-faded navbar-full> < a class =navbar-brandhref =＃>< img class =img-fluidsrc =img / logoMedium.png/>< / a> < button class =navbar-toggler hidden-lg-uptype =buttondata-toggle =collapsedata-target =＃navbarResponsivearia-controls =navbarResponsivearia-expanded = -label =切换导航>< / button> < div class =collapse navbar-toggleable-mdid =navbarResponsive> < ul class =nav navbar-nav> < li class =nav-item active> < a class =nav-linkhref =＃>首页< span class =sr-only>（current）< / span>< / a> < / li> < li class =nav-item> < a class =nav-linkhref =＃>关于我们< / a> < / li> < li class =nav-item> < a class =nav-linkhref =＃>太阳能发电< / a> < / li> < li class =nav-item> < a class =nav-linkhref =＃>无义务报价< / a> < / li> < li class =nav-item> < a class =nav-linkhref =＃>与我们联系< / a> < / li> < / ul> < / div> < / nav>  

感谢您的帮助： p>

解决方案

放置右键类，您将得到所需的结果。

 < button class =navbar-toggler hidden-lg-up pull-righttype =buttondata-toggle =collapsedata-target =＃navbarResponsivearia-controls =navbarResponsivearia-expanded =falsearia-label =Toggle navigation>< / button& 
  

或您可以使用以下参数定义样式：

  float：right！important; 
  

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?

This is my current code.

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

Thanks for the help :)

解决方案

Put the class pull-right and you'll get the result that you're looking for.

<button class="navbar-toggler hidden-lg-up pull-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>

or you can define a style with the following parameters:

float: right !important;

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