html - Bootstrap 4——使用切换按钮将链接移动到导航栏的右侧

标签 html css bootstrap-4

<分区>

我试图将链接从导航栏的左侧移动到右侧,但它不允许。我试过将它向右浮动但什么也没发生,与 position:relative; 相同;右:200px;和 padding-right: -200px;.如果有人有任何其他建议,我们将不胜感激。

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">

    <button class="navbar-toggler navbar-toggler-right" 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>

    <a class="navbar-brand" href="index.html">

        <img id="logo" src="images/logo.png" width="200" class="d-inline-block align-top" alt="">

    </a>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">

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

            <li class="nav-item">
                <a class="nav-link active text-white" href="index.html">Home <span class="sr-only">(current)</span></a>
            </li>

            <li class="nav-item">
                <a class="nav-link text-white" href="services.html">Services</a>
            </li>

            <li class="nav-item">
                <a class="nav-link text-white" href="portfolio.html">Portfolio</a>
            </li>

            <li class="nav-item">
                <a class="nav-link text-white" href="about.html">About</a>
            </li>

        </ul>

    </div>
</nav>

最佳答案

您使用的是 .mr-auto,所以您有 margin-right: auto !important 并且导航项左对齐。
如果您将类更改为 .ml-auto,您将拥有 margin-left: auto !important 并且您的导航项右对齐

关于html - Bootstrap 4——使用切换按钮将链接移动到导航栏的右侧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41711978/

相关文章:

html - 网格格式的视频 div 背景

HTML 文本字段和按钮显示比指定的大

html - 如何将标准文本标签转换为悬停按钮?

javascript - 假复选框 [使用 jquery ]

html - Bootstrap 4 为什么我的网格列是 "eating"其他列

javascript - 从组合的组按钮和下拉列表中获取值(value)

php - 使用 Yii2 在邮件中嵌入图像时出错

javascript - Chrome Web Extension,使用按钮在新选项卡中打开网页

CSS 缩放图像上的 Javascript 转换效果不佳

html - Bootstrap 4 beta - cols 计算不正确