CSS float-right在Bootstrap中不起作用4 [英] CSS float-right not working in Bootstrap 4

问题描述

我试图让我的导航链接浮动到我的导航栏的右侧，但我无法让它工作。我尝试过使用float：right！important，float-xs-right和justify-content-endbootstrap 4 class，在我的CSS文件中，它仍然不起作用。

以下是我网站导航栏的HTML：

 < div id =navbarclass =navbar navbar-fixed-top> 
< div class =container> 
< div class =row> 
< div class =navbar-brand> 
< img src =images / logo.pngwidth =88px> 
 Scervino草坪服务
< / div> 
< ul class =nav justify-content-end> 
< li class =nav-item> 
< a class =nav-linkhref =home>主页< / a> 
< / li> 
< li class =nav-item> 
< a class =nav-linkhref =services>服务< / a> 
< / li> 
< li class =nav-item> 
< a class =nav-linkhref =about>关于我们< / a> 
< / li> 
< li class =nav-item> 
< a class =nav-linkhref =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; 
颜色：＃9CCC58; 
} 
  

我对Bootstrap 4框架比较陌生，所以有可能我可能只是犯了一个愚蠢的错误，但希望有人能帮助我。 ：

解决方案

您可以使用 .justify-content-between on父元素 .row 将flex子元素移动到行的最边缘。

  #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 =stylesheet/>< div id = navbarclass =navbar navbar-fixed-top>< div class =container>< div class =row justify-content-between>< div class =navbar-brand >< img src =images / logo.pngwidth =88px> ; Scervino草坪服务< / div> < ul class =nav justify-content-end> < li class =nav-item> < a class =nav-linkhref =home>主页< / a> < /锂> < li class =nav-item> < a class =nav-linkhref =services>服务< / a> < /锂> < li class =nav-item> < a class =nav-linkhref =about>关于我们< / a> < /锂> < li class =nav-item> < a class =nav-linkhref =contact>联络人< / a> < /锂> < / UL> < / DIV> < / div>

I'm trying to get my nav links to float to the right of my navbar, but I can't get it to work. I've tried using the ".float-right", "float-xs-right", and "justify-content-end" bootstrap 4 class, along with using "float: right !important;" in my CSS file, and it still won't work.

Here is the HTML for the navbar of my website:

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

And here is the CSS:

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

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

I'm relatively new to the Bootstrap 4 framework, so it's possible that I might just be making a dumb mistake, but hopefully someone can help me. :(

解决方案

You can use .justify-content-between on the parent .row to move the flex children to the far edges of the 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>

这篇关于CSS float-right在Bootstrap中不起作用4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！