如何在导航栏中将按钮移动到左侧？

时间：2018-04-24 16:47:02

标签： bootstrap-4

我无法弄清楚这个简单的任务。我需要将按钮放在左侧。

enter image description here

HTML 

<body>

    <nav class="navbar navbar-dark fixed-top bg-info flex-md-nowrap p-0">

        <a class="navbar-brand col-md-2 mr-0" href="#">Web name</a>

        <button class="btn btn-primary btn-sm float-left">
            <span data-feather="toggle-left"></span>
        </button>

        <span class="text-nowrap" style="color:white; margin-right:20px;"><span data-feather="user"></span>username</span>

    </nav>
...
</body>

1 个答案:

答案 0 :(得分：2)

将float-left替换为mr-auto以获取自动右边距。这将使按钮向后推。

<nav class="navbar navbar-dark fixed-top bg-info flex-md-nowrap p-0">
    <a class="navbar-brand col-md-2 mr-0" href="#">Web name</a>
    <button class="btn btn-primary btn-sm mr-auto">
        <span data-feather="toggle-left"></span>
    </button>
    <span class="text-nowrap" style="color:white; margin-right:20px;"><span data-feather="user"></span>username</span>
</nav>

https://www.codeply.com/go/SQD3e4YHMY

相关：Bootstrap NavBar with left, center or right aligned items

相关问题
最新问题