Bootstrap 4 - 将 1 个元素移动到容器的另一端答案

【问题标题】：Bootstrap 4 - Moving 1 element to opposite end of containerBootstrap 4 - 将 1 个元素移动到容器的另一端
【发布时间】：2020-05-02 15:41:54
【问题描述】：

我曾尝试查找以前是否有人问过类似的问题，但找不到完全相同的问题。我正在尝试将电话号码与其他元素一起从左侧移动到容器的最右侧。我尝试了一些不同的命令，但无法让它让步。任何见解将不胜感激！

 <!DOCTYPE html>
<html>
<head>
    <title>Retirement4U</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://kit.fontawesome.com/b6e6bb0ba7.js" crossorigin="anonymous"></script>
    <link rel="stylesheet"type="text/css" href="retirement4u.css">
</head>
<body>

    <nav class="navbar navbar-expand-sm navbar-dark bg-custom p-1">
        <img id="head-img" src="Retirement-Solutions-4u-Final-logo.png" alt="Retirement-Solutions-4U-Final-logo">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <div class="container">
                <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="#">Features</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Pricing</a>
                    </li>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link head-phone ml-auto justify-content: right" href="#"><i class="fas fa-phone-alt"></i> 888-218-0324</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

【问题讨论】：

标签： bootstrap-4 flexbox containers navbar

【解决方案1】：

将整个导航栏向右移动

将 margin-left: auto 添加到您的 navbar-nav 元素的 css 中。您可以通过许多不同的方式来做到这一点，例如给元素一个 id 或您自己的类名，并在 css 文件中设置它们的样式。最简单的测试方法是使用内联样式，如下所示：

<div class="collapse navbar-collapse" id="navbarNav">
    <div class="container">
        <ul class="navbar-nav" style="margin-left: auto;">
            ...
        </ul>
     </div>
</div>

仅移动电话号码

为了做到这一点，我们需要使包含所有链接的 navbar-nav 元素足够大以定位它所包含的链接。在您当前的实现中， navbar-nav 元素的大小与其包含的大小相同，因此，链接自然而然地彼此相邻。为此，我们通过使用width: 100% 对其进行样式设置，使 navbar-nav 元素的宽度与其封闭容器的宽度相同。现在 navbar-nav 元素内部有空白空间来分隔链接，我们可以通过使用margin-left: auto 设置电话号码来让电话号码向右移动，它用电话号码的左边距填充空白空间项目。

<div class="collapse navbar-collapse" id="navbarNav">
    <div class="container">
        <ul class="navbar-nav" style="width: 100%;">
            <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="#">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item" style="margin-left: auto;">
                <a class="nav-link head-phone ml-auto justify-content: right" href="#"><i class="fas fa-phone-alt"></i> 888-218-0324</a>
            </li>
        </ul>
    </div>
</div>

【讨论】：

该样式是导航栏的全部内容还是仅应用于单个电话号码行？
那将是整个导航栏，但这就是你说你想要的？
如果我的回答是正确的，或者给了你你想要的，你能把它标记为正确吗？