將導航欄切換按鈕對齊

我正在使用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>

感謝您的幫助:)

來源

2016-12-14 user3599852

「Navbar的toggler右」類可以幫助你這一點。 – Nimmi

把類右拉式，你會得到你正在尋找的結果。

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

，或者您可以定義下列參數樣式：

float: right !important;

來源

2016-12-14 22:47:18 Dan

您能否更具體地關於我應該添加哪個標籤，因爲我嘗試了沒有運氣的右拉標籤。 – user3599852

請看看。 – Dan

謝謝你的幫助丹，但我已經嘗試過了，它什麼也沒做。 – user3599852

使用.float-xs-right類：

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

或者添加float: right;到.navbar-toggler如下面的代碼片段：

Note that pull-right has been removed in v4.

@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; 
 
    float: right; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script> 
 
<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>

來源

2016-12-26 17:00:40 Syden

這是我如何解決了這個：

<header> 
    <nav class="navbar navbar-fixed-top navbar-dark bg-inverse"> 
     <a class="navbar-brand" href="#">Fixed top</a> 
     <button type="button" class="navbar-toggler hidden-sm-up float-xs-right" data-toggle="collapse" data-target="#navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button> 
     <div class="clearfix"></div> 
     <div class="collapse navbar-toggleable-xs" id="navbarResponsive"> 
      <ul class="nav navbar-nav"> 
       <li class="nav-item active"> 
        <a href="#" class="nav-link">Home<span class="sr-only">(current)</span></a> 
       </li> 
       <li class="nav-item"> 
        <a href="#" class="nav-link">Planets</a> 
       </li> 
       <li class="nav-item"> 
        <a href="" class="nav-link">Spaceships</a> 
       </li> 
       <li class="nav-item"> 
        <a href="" class="nav-link">About</a> 
       </li> 
       <li class="nav-item"> 
        <a href="" class="nav-link">Contact</a> 
       </li> 
      </ul> 
     </div> 
    </nav> 
</header>

請注意，您必須使用clearfix，否則從按鈕的浮動會做時髦的事情菜單而它正在崩潰。

來源

2016-12-31 12:30:34

只是類ml-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>

來源

2017-08-12 19:00:00

這是我引導4

<button type="button" class="navbar-toggler navbar-toggler-right" 
     data-toggle="collapse" data-target=".navbar-collapse" 
     aria-controls="navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">

什麼工作

或甚至更簡單Bootstrap docs

在你的按鈕來切換0

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
<span class="navbar-toggler-icon"></span>

來源

2017-09-04 19:25:15

將導航欄切換按鈕對齊

回答

相關問題