CSS float-right在Bootstrap中不工作4

我試圖讓我的導航鏈接浮動到我的導航欄的右側，但我無法讓它工作。我嘗試過使用「float：right！important」，「float-xs-right」和「justify-content-end」bootstrap 4 class，在我的CSS文件中，它仍然無法工作。CSS float-right在Bootstrap中不工作4

這裏是我的網站的導航欄的HTML：

<div id="navbar" class="navbar navbar-fixed-top"> 
    <div class="container"> 
     <div class="row"> 
      <div class="navbar-brand"> 
       <img src="images/logo.png" width="88px"> 
       Scervino Lawn Service 
      </div> 
      <ul class="nav justify-content-end"> 
       <li class="nav-item"> 
        <a class="nav-link" href="home">Home</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="services">Services</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="about">About Us</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="contact">Contact</a> 
       </li> 
      </ul> 
     </div> 
    </div> 
</div>

這裏是CSS：

#navbar { 
    box-shadow: 0px 0px 11px #000; 
    padding: 0; 
} 

#navbar .navbar-brand { 
    font-size: 1.6em; 
    font-weight: bold; 
    color: #9CCC58; 
}

我是相對較新的引導4框架，所以它可能是我可能只是犯了一個愚蠢的錯誤，但希望有人能幫助我。 :(

來源

2017-08-03 Jake Scervino

您可以使用.justify-content-between父.row到柔性孩子移到該行的最邊緣。

#navbar { 
 
    box-shadow: 0px 0px 11px #000; 
 
    padding: 0; 
 
} 
 

 
#navbar .navbar-brand { 
 
    font-size: 1.6em; 
 
    font-weight: bold; 
 
    color: #9CCC58; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div id="navbar" class="navbar navbar-fixed-top"> 
 
    <div class="container"> 
 
     <div class="row justify-content-between"> 
 
      <div class="navbar-brand"> 
 
       <img src="images/logo.png" width="88px"> 
 
       Scervino Lawn Service 
 
      </div> 
 
      <ul class="nav justify-content-end"> 
 
       <li class="nav-item"> 
 
        <a class="nav-link" href="home">Home</a> 
 
       </li> 
 
       <li class="nav-item"> 
 
        <a class="nav-link" href="services">Services</a> 
 
       </li> 
 
       <li class="nav-item"> 
 
        <a class="nav-link" href="about">About Us</a> 
 
       </li> 
 
       <li class="nav-item"> 
 
        <a class="nav-link" href="contact">Contact</a> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
    </div>

來源

2017-08-03 21:39:22

非常感謝你！ –

我試圖引導4.0.0阿爾法6和它的工作原理是這樣的：https://repl.it/JwMq/0

我剛加了這個：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"/>

而一個額外的</div>

來源

2017-08-03 21:43:55 DarkCeptor44

我有這個代碼，它仍然不起作用。哎呀對不起，我忘了添加該div，當我在我的問題中粘貼我的代碼，但額外的div在我的原代碼 –

然後，@ michael-coker答案應該工作。 – DarkCeptor44

更新2018 - 引導4.0.0

原來的答案不再是引導4.0.0作品，它的使用引導的.row在導航欄組件不是好的做法。 .row只能用於網格列。

現在Bootstrap 4是flexbox，對齊navbar組件的一種方法是使用auto-margin utility classes，例如ml-auto，它是CSS margin-left:auto的快捷方式。這可以用來推動nav向右......

https://www.codeply.com/go/ZAGhCX5lpq

<div id="navbar" class="navbar navbar-expand navbar-fixed-top"> 
    <div class="container"> 
     <div class="navbar-brand"> 
      <img src=".." width="88px"> 
      Scervino Lawn Service 
     </div> 
     <ul class="nav"> 
      <li class="nav-item"> 
       <a class="nav-link" href="home">Home</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" href="services">Services</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" href="about">About Us</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" href="contact">Contact</a> 
      </li> 
     </ul> 
    </div> 
</div>

還是flexbox utils像justify-content-between可以在導航欄裏面的container使用...

<div id="navbar" class="navbar navbar-expand navbar-fixed-top"> 
    <div class="container justify-content-between"> 
     <div class="navbar-brand"> 
      <img src=".." width="88px"> 
      Scervino Lawn Service 
     </div> 
     <ul class="nav"> 
      <li class="nav-item"> 
       <a class="nav-link" href="home">Home</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" href="services">Services</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" href="about">About Us</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" href="contact">Contact</a> 
      </li> 
     </ul> 
    </div> 
</div>

只需注意，在這種情況下，justify-content-between的作品，因爲只有2個導航欄組件（navbar品牌和導航）。

來源

2018-02-19 13:17:46 ZimSystem

CSS float-right在Bootstrap中不工作4

回答

相關問題