将导航栏切换按钮对齐到右侧

use*_*852 4 html css navbar twitter-bootstrap bootstrap-4

我正在玩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;
}
Run Code Online (Sandbox Code Playgroud)
 <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>
Run Code Online (Sandbox Code Playgroud)

谢谢您的帮助 :)

小智 13

只需将类添加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>
Run Code Online (Sandbox Code Playgroud)


Dan*_*Dan 1

将类向右拉,您就会得到您正在寻找的结果。

<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>
Run Code Online (Sandbox Code Playgroud)

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

float: right !important;
Run Code Online (Sandbox Code Playgroud)