Bootstrap導航欄右對齊將項目推向左邊

編輯：我已解決該問題。原來，導航欄不是100％的寬度，沒有達到屏幕的邊緣。Bootstrap導航欄右對齊將項目推向左邊

我目前正在努力與引導4導航欄。我使用以前的版本時遇到同樣的問題。網上有很多解決方案，但他們似乎並不適用於我的案例。

默認配置：

隨着MX-汽車：

我想的標誌留下它在哪裏，鏈接是罰款太多，但「登錄「鏈接應該在屏幕的右邊緣。最接近我達到預期效果的是使用右對齊。即使這樣，鏈接最終將從右邊緣變爲150px，但不會應用邊距。

.navbar { 
 
\t 
 
\t width:100%; 
 
\t background: none !important; 
 

 
\t @media(max-width:34em) { 
 
\t \t background: black !important; 
 
\t } 
 

 
\t .navbar-toggler { 
 
\t \t cursor:pointer; 
 
\t \t outline:0; 
 
\t } 
 

 
\t .nav-link { 
 
\t \t text-transform:uppercase; 
 
\t \t font-weight:bold; 
 
\t } 
 

 
\t .nav-item { 
 
\t \t padding: 0 1rem; 
 

 
\t \t @media(max-width: 34em) { 
 
\t \t \t padding: 0; 
 
\t \t } 
 

 
\t \t .nav-link { 
 
\t \t \t @media(max-width: 34em) { 
 
\t \t \t \t font-weight:normal; 
 
\t \t \t \t color:#fff !important; 
 
\t \t \t } 
 
\t \t } 
 
\t } 
 
}

<!DOCTYPE html> 
 
<html class="no-js" lang="en"> 
 
    <head> 
 
     <meta http-equiv="x-ua-compatible" content="ie=edge"> 
 
\t  <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
 

 
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,800"> 
 
     <link rel='stylesheet' href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
     <link rel="stylesheet" href="/css/bootstrap.css"> 
 
     <link rel="stylesheet" href="/css/style.css"> 
 
    </head> 
 

 
    <body> 
 

 
     <div id="hero"> 
 
      <div class="container"> 
 
       <div class="row"> 
 
        <nav class="navbar navbar-toggleable-md navbar-inverse"> 
 
         <a href="#" class="navbar-brand text-primary" id="logo">LOGO</a> 
 
         <a href="#" class="nav-item text-primary" id="login"></a> 
 

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

 
         <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent"> 
 
          <ul class="navbar-nav"> 
 
           <li class="nav-item"> 
 
            <a class="nav-link text-primary" href="#">LINK1</a> 
 
           </li> 
 
           <li class="nav-item"> 
 
            <a class="nav-link text-primary" href="#">LINK2</a> 
 
           </li> 
 
           <li class="nav-item"> 
 
            <a class="nav-link text-primary" href="#">LINK3</a> 
 
           </li> 
 
           <li class="nav-item"> 
 
            <a class="nav-link text-primary" href="#">LINK4</a> 
 
           </li> 
 
          </ul> 
 
          <ul class="navbar-nav mx-auto"> 
 
          \t <li class="nav-item"> 
 
            <a class="nav-link text-primary" href="#">LOGIN</a> 
 
           </li> 
 
          </ul> 
 
         </div> 
 
        </nav> 
 
       </div>

來源

2017-08-12 Blockrock

那麼，與引導，有一個導航欄右類。因此，對要權的資產淨值的一部分：

<ul class="nav navbar-nav mx-auto navbar-right"> 
    <li class="nav-item"> 
     <a class="nav-link text-primary" href="#">LOGIN</a> 
    </li> 
</ul>

此外，引導4是阿爾法，大多數人使用的自舉3，它上面表示。我不完全確定mx-auto是什麼（從未聽說過）。但是我知道navbar-right會在右側放置一個鏈接。

來源

2017-08-12 23:01:36

這就是我以前的問題。它「有點」起作用。我的意思是，它確實把鏈接放在右邊，但不是邊緣。事實上，如上所述，它離它很遠。 – Blockrock

Bootstrap導航欄右對齊將項目推向左邊

回答

相關問題