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框架，所以它可能是我可能只是犯了一个愚蠢的错误，但希望有人能帮助我。 :(

答

您可以使用.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>

非常感谢你！ –

答

我试图引导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>

我有这个代码，它仍然不起作用。哎呀对不起，我忘了添加该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品牌和导航）。

CSS float-right在Bootstrap中不工作4

相关推荐