logo标签列表

如何在Bootstrap 5中将导航项右对齐？

cssalignmentnavbarbootstrap-5
28

我从https://www.codeply.com/go/qhaBrcWp3v复制了一个导航栏HTML代码。

示例6：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="d-flex flex-grow-1">
    <span class="w-100 d-lg-none d-block"><!-- hidden spacer to center brand on mobile --></span>
    <a class="navbar-brand d-none d-lg-inline-block" href="#">
        Navbar 6
    </a>
    <a class="navbar-brand-two mx-auto d-lg-none d-inline-block" href="#">
        <img src="//placehold.it/40?text=LOGO" alt="logo">
    </a>
    <div class="w-100 text-right">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
</div>
<div class="collapse navbar-collapse flex-grow-1 text-right" id="myNavbar">
    <ul class="navbar-nav ml-auto flex-nowrap">
        <li class="nav-item">
            <a href="#" class="nav-link m-2 menu-item nav-active">Our Solution</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link m-2 menu-item">How We Help</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link m-2 menu-item">Bdfdsfslog</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link m-2 menu-item">Contact</a>
        </li>
    </ul>
</div>

这段代码将导航栏项目保持在右侧，但当我将其粘贴并运行我的HTML代码时，它不起作用，所有项目都在左侧位置

这是我的index.html文件

<html>
<head>
    <title>Website Template</title>
    <link rel="stylesheet" href="style.css"> 
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" 
            integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</head>
<body data-spy="scroll" data-target="#navbarResponsive">
    <div id="home"></div>
    <!-- NAVIGATION -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="d-flex flex-grow-1">
            <span class="w-100 d-lg-none d-block"><!-- hidden spacer to center brand on mobile --></span>
            <a class="navbar-brand d-none d-lg-inline-block" href="#">
                Navbar 6
            </a>
            <a class="navbar-brand-two mx-auto d-lg-none d-inline-block" href="#">
                <img src="//placehold.it/40?text=LOGO" alt="logo">
            </a>
            <div class="w-100 text-right">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar">
                    <span class="navbar-toggler-icon"></span>
                </button>
            </div>
        </div>
        <div class="collapse navbar-collapse flex-grow-1 text-right" id="myNavbar">
            <ul class="navbar-nav ml-auto flex-nowrap">
                <li class="nav-item">
                    <a href="#" class="nav-link m-2 menu-item nav-active">Our Solution</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link m-2 menu-item">How We Help</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link m-2 menu-item">Blog</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link m-2 menu-item">Contact</a>
                </li>
            </ul>
        </div>
    </nav>
    <!-- END OF NAVIGATION -->
</body>
我尝试了来自https://getbootstrap.com/docs/5.0/components/navbar/的Navbar代码，但我不知道如何移动导航项（ml-auto没有起作用）。
7个回答
57

我的Codeply示例代码使用的是Bootstrap 4，但是你的代码却使用Bootstrap 5 beta。如果你看一下新的Bootstrap 5间距实用类，你会发现...

  • l（左）被替换为s（开始）
  • r（右）被替换为e（结束）

为什么在Bootstrap 5中，左外边距（ml-*）不起作用？

ml-auto不再存在，而Bootstrap 5的相应类别应该是ms-auto：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="d-flex flex-grow-1">
        <span class="w-100 d-lg-none d-block">
            <!-- hidden spacer to center brand on mobile --></span>
        <a class="navbar-brand d-none d-lg-inline-block" href="#"> Navbar 6 </a>
        <a class="navbar-brand-two mx-auto d-lg-none d-inline-block" href="#">
            <img src="//placehold.it/40?text=LOGO" alt="logo">
        </a>
        <div class="w-100 text-right">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
    </div>
    <div class="collapse navbar-collapse flex-grow-1 text-right" id="myNavbar">
        <ul class="navbar-nav ms-auto flex-nowrap">
            <li class="nav-item">
                <a href="#" class="nav-link m-2 menu-item nav-active">Our Solution</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link m-2 menu-item">How We Help</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link m-2 menu-item">Blog</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link m-2 menu-item">Contact</a>
            </li>
        </ul>
    </div>
</nav>

示例: https://codeply.com/p/zzFC5XoyUm

为什么在Bootstrap 5中，margin-right (mr-*)不起作用？

此外，mr-auto已被替换为me-auto。

您可以在这里阅读为什么Bootstrap 5使用了“start”和“end”方法来改善RTL支持，因为left和right是绝对的，而start和end是相对的。

Flexbox实用程序，如justify-content-end也可以像这里所解释的那样使用。

2
不要使用justify-content-end，而要使用ms-auto。 使用m-和p-来设置边距和填充。
  • t - 用于设置margin-top或padding-top的类
  • b - 用于设置margin-bottom或padding-bottom的类
  • s - 用于在LTR中设置margin-left或padding-left，RTL中设置margin-right或padding-right的类
  • e - 用于在LTR中设置margin-right或padding-right，RTL中设置margin-left或padding-left的类
  • x - 用于同时设置*-left和*-right的类
  • y - 用于同时设置*-top和*-bottom的类
0
我实际上尝试了一种不同的方法，虽然受到了之前一些帖子的启发。我想只将我的导航栏上的一些按钮（“我的个人资料”和“登录”按钮）右对齐，同时保持所有其他按钮左对齐。

按照以下步骤操作

  1. 使用position-relative将导航栏的位置设置为相对位置
  2. 将要右对齐的按钮放在单独的<ul>中
  3. 将<ul>设置为绝对定位，并放在末尾，如下所示：<ul class="navbar-nav position-absolute end-0 mx-3">
  4. 在您刚刚创建的<ul>之前创建一个空的<li>，以在缩小屏幕时保持间距（因为绝对元素会与其他静态和相对元素重叠）。
  5. 将宽度设置为右对齐的<ul>的宽度（使用Chrome检查元素找到）。例如：<li class="nav-item" style="width: 150px"></li>

我的代码示例

        {# Create Navbar #}
        <nav class="navbar navbar-expand-md navbar-dark bg-dark position-relative mb-4">
            <div class="container-fluid">
                <a class="navbar-brand" href="{{ path('home') }}">
                    <img src="/favicon/android-chrome-192x192.png" alt="Logo" style="height: 50px; width: 50px">
                    Company Name
                </a>
                <button class="navbar-toggler" type="button" data-coreui-toggle="collapse" data-coreui-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarCollapse">
                    <ul class="navbar-nav me-auto mb-2 mb-md-0">
                        <li class="nav-item">
                            <a class="nav-link" aria-current="page" href="{{ path('home') }}">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{{ path('guide_home') }}">Guide</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">About us</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Blog</a>
                        </li>
                        {# Invisible div to prevent overlap of absolute positioned elements #}
                        <li class="nav-item" style="width: 150px"></li>
                        <ul class="navbar-nav position-absolute end-0 mx-3">
                            {# Create a login or logout link depending whether a user is logged in or not #}
                            {% if app.user %}
                                <li class="nav-item">
                                    <a class="nav-link" href="{{ path('profile_home') }}">My Profile</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="{{ path('app_logout') }}">Logout</a>
                                </li>
                            {% else %}
                                <li class="nav-item">
                                    <a class="nav-link" href="{{ path('app_login') }}">Login/Register</a>
                                </li>
                            {% endif %}
                        </ul>
                    </ul>
                </div>
            </div>
        </nav>

总体

相比其他解决方案，我觉得这个更容易理解，并且能够更轻松地让它工作。希望这对于其他遇到同样问题的人有所帮助。如果您对我的方法有任何反馈或改进意见，请在评论区留言。谢谢！:)

注意：我的示例是在Symfony项目中使用twig模板完成的，如果您发现其中的语法有些困惑，请不必担心。然而，所有的HTML都适用于任何开发工具。

0

对于那些开始使用Bootstrap 5（beta版本）的人来说，类名中有一些小变化。

“Left”被替换为“start”，“right”在Bootstrap中被替换为“end”。

例如，在Bootstrap 4中，我们有ml-auto，但在Bootstrap 5中，我们必须使用ms-auto。同样地，对于mr，我们有me。

而且，Bootstrap中的每个类都适用于相同的规则：无论是将“left”和“right”表示为“l”和“r”，还是将它们作为完整单词使用，它们都被替换为“s”和“e”、“start”和“end”。

0

这个对我有用：

在您的“ui”标签中使用此类：

“ms-auto”表示“margin start”自动，这将使您的导航项对齐到右上角。

这是因为在Bootstrap 5中，“l”（左）已被替换为“s”（开始）。

0

如果其他方法都不起作用，您可以使用“justify-content-end”。

0

试试这个：

  <div class="d-flex flex-row-reverse bd-highlight">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

你在哪里有这个：

  <!-- NAVIGATION -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="d-flex flex-grow-1"> //modify this to include flex-row-reverse
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接