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

查看：14
本文介绍了CSS float-right 在 Bootstrap 4 导航栏中不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图让我的导航链接浮动到我的导航栏的右侧，但我无法让它工作.我尝试过使用.float-right"、float-xs-right"和justify-content-end"引导程序 4 类，以及使用float: right !important;"在我的 CSS 文件中，它仍然无法工作.

这是我网站导航栏的 HTML:

<ul class="nav justify-content-end"><li class="nav-item"><a class="nav-link" href="home">Home</a><li class="nav-item"><a class="nav-link" href="services">服务</a><li class="nav-item"><a class="nav-link" href="about">关于我们</a><li class="nav-item"><a class="nav-link" href="contact">联系方式</a>

这里是 CSS:

#navbar {框阴影:0px 0px 11px #000;填充:0；}#navbar .navbar-brand {字体大小:1.6em；字体粗细:粗体；颜色:#9CCC58；}

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

解决方案

您可以在父 .row 上使用 .justify-content-between 来移动 flex 子项到行的远端.

#navbar {框阴影:0px 0px 11px #000;填充:0；}#navbar .navbar-brand {字体大小:1.6em；字体粗细:粗体；颜色:#9CCC58；}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="样式表"/><div id="navbar" class="navbar navbar-fixed-top"><div class="容器"><div class="row justify-content-between"><div class="navbar-brand"><img src="images/logo.png" width="88px">Scervino 草坪服务

<ul class="nav justify-content-end"><li class="nav-item"><a class="nav-link" href="home">Home</a><li class="nav-item"><a class="nav-link" href="services">服务</a><li class="nav-item"><a class="nav-link" href="about">关于我们</a><li class="nav-item"><a class="nav-link" href="contact">联系方式</a>

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

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆