Bootstrap 4 mr-auto 对齐在导航栏中不起作用？答案

【问题标题】：Bootstrap 4 mr-auto alignment not working in navbar?Bootstrap 4 mr-auto 对齐在导航栏中不起作用？
【发布时间】：2021-10-15 09:19:57
【问题描述】：

我已经查看了该网站上的其他类似问题，但由于我是网络开发的初学者，我无法为自己解释答案。我想让导航栏中的联系链接与导航栏的右侧对齐。但是，mr-auto 和我尝试过的所有其他方法都没有奏效。 mr-auto 只是让它看起来像一个超链接，根本没有将它移动到右侧。以下是我的 html 代码，css 样式表目前是空的，所以我没有什么可显示的。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Me</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<body>
    
    <nav class="navbar navbar-expand-lg navbar-light bg-light">

        <!-- Left Corner Title -->
        <a class="navbar-brand" href="#"> Portfolio v1 </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        
        <!-- Nav Bar List -->
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#"> Home <span class="sr-only">(current)</span></a>
            </li>

            <li class="nav-item">
              <a class="nav-link" href="#"> Projects </a>
            </li>

            <li class="nav-item">
                <a class="nav-link" href="#"> About Me </a>
            </li>
            
            <!-- Right Corner -->
            <li class="nav-item">
                <a class="nav-link float-right" href="#"> Contact </a>
            </li>
            
          </ul>

          <!----
          <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
          </form>
        -->

        </div>
      </nav>

</body>
</html>

【问题讨论】：

您想要整个菜单右侧还是仅联系方式

标签： html bootstrap-4 navbar

【解决方案1】：

在 Bootstrap 4 中，mr-auto 类在 right 侧放置了一个自动边距，因此元素将向左移动，因为它们的边距正确的。您必须在 Contact 链接上使用 ml-auto 类，以便它的 left 侧有一个边距，因此它会向右移动。另外，请从<ul> 中取出联系链接，以使 ml-auto 类生效。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Me</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<body>
    
    <nav class="navbar navbar-expand-lg navbar-light bg-light">

        <!-- Left Corner Title -->
        <a class="navbar-brand" href="#"> Portfolio v1 </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        
        <!-- Nav Bar List -->
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#"> Home <span class="sr-only">(current)</span></a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#"> Projects </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#"> About Me </a>
                </li>
            </ul>

            <!-- Right Corner -->
            <!-- <li class="nav-item"> -->
            <a class="nav-link ml-auto" href="#"> Contact </a>
            <!-- </li> -->

        </div>
    </nav>

</body>
</html>

【讨论】：

【解决方案2】：

您可以使用 CSS 中的 position 属性从右侧指定其位置。但请记住，当元素在导航栏中的菜单中折叠时，它可能看起来很难看。在这种情况下，使用@media 查询来更正位置。设置包含 contact 的 li 元素的正确 id，并将样式表的链接放在 Bootstrap 的下方。

#rt{
  position:absolute;
  right: 10px;
}

如果您对这一切感到困惑，请阅读position 和@media。

【讨论】：

【解决方案3】：

mr-auto 在右侧添加一个自动边距，从而将所有内容推向左侧。如果你想把所有东西都推到右边，你需要有ml-auto。只需替换它，您的所有链接都会向右对齐（有效期至 B4）。

对于任何 B5 用户，mr 变为 me 和 ml 变为 ms。

【讨论】：

【解决方案4】：

<ul class="navbar-nav ml-auto">

ml-auto - 右对齐
mx-auto - 居中对齐
mr-auto - 左对齐

根据您的要求使用上述类。 :)

【讨论】：