Bootstrap 4 - 用切換按鈕將鏈接移動到導航欄右側

我試圖將鏈接從導航欄左側移動到右側，它不會讓我。我嘗試將它向右移動，沒有發生任何事情，與位置相同：相對;右：200px;和填充權：-200px ;.如果有人有任何其他建議，將不勝感激，謝謝。Bootstrap 4 - 用切換按鈕將鏈接移動到導航欄右側

<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 

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

     <span class="navbar-toggler-icon"></span> 

    </button> 

    <a class="navbar-brand" href="index.html"> 

     <img id="logo" src="images/logo.png" width="200" class="d-inline-block align-top" alt=""> 

    </a> 

    <div class="collapse navbar-collapse" id="navbarSupportedContent"> 

     <ul class="navbar-nav mr-auto"> 

      <li class="nav-item"> 
       <a class="nav-link active text-white" href="index.html">Home <span class="sr-only">(current)</span></a> 
      </li> 

      <li class="nav-item"> 
       <a class="nav-link text-white" href="services.html">Services</a> 
      </li> 

      <li class="nav-item"> 
       <a class="nav-link text-white" href="portfolio.html">Portfolio</a> 
      </li> 

      <li class="nav-item"> 
       <a class="nav-link text-white" href="about.html">About</a> 
      </li> 

     </ul> 

    </div> 
</nav>

來源

2017-01-18 Cameron Foster

您使用的是.mr-auto讓你有margin-right: auto !important和導航項左對齊。
如果更改類.ml-auto你有margin-left: auto !important和你的資產淨值的項目是右對齊

來源

2017-01-18 05:46:40 DestinatioN

在jsfiddle中確認：https：//jsfiddle.net/sayLz41a/ – haxxxton

修改後的jsfiddle https：// jsfi ddle.net/sayLz41a/1/（帶白色導航欄上的黑色文本而不是白色導航欄上的白色文本） – DestinatioN

非常感謝！ :) –

修改一些CSS自舉：

用於justify-content: end;開始的內容對最終

.mr-auto { 
    margin-right: 0 !important; 
} 
.navbar-toggleable-md .navbar-collapse {   
    -webkit-justify-content: flex-end; 
    justify-content: flex-end; 
}

這裏小提琴代碼：https://jsfiddle.net/0ewenvcb/2/

來源

2017-01-18 05:57:26

這似乎沒有工作..鏈接仍在左側:( – haxxxton

在小提琴它的工作.. –

http://imgur.com/nCwNwGi在Chrome OSX版本55.0.2883.95（64位）鏈接在答案中的小提琴鏈接左對齊（https://jsfiddle.net/0ewenvcb/1/） – haxxxton

Bootstrap 4 - 用切換按鈕將鏈接移動到導航欄右側

回答

相關問題