Bootstrap 4 Alpha 6导航选项卡右对齐项目

问题描述

我正在尝试创建一个选项卡菜单，该菜单的最右边为nav-item dropdown.

I am trying to create a tab menu that has nav-item dropdown to the far right of the menu.

Bootstrap 4 alpha 5，其工作方式为float-xs-right: http://codeply.com/go/FCFPpRqhZd

Bootstrap 4 alpha 5, with float-xs-right its working: http://codeply.com/go/FCFPpRqhZd

Bootstrap 4 alpha 6，我更改为float-right，但是它不起作用: http://codeply.com/go/5mddDUv1M6

Bootstrap 4 alpha 6, i changed to float-right but it isnt working: http://codeply.com/go/5mddDUv1M6

有主意吗?

推荐答案

由于alpha 6现在是flexbox，因此float在这种情况下将不再起作用.

Since alpha 6 is now flexbox, float will no longer work in this case.

使用ml-auto实用工具类代替margin-left:auto

<div class="col-md-12">
    <ul class="nav nav-tabs">
        <li class="nav-item">
            <a href="#" class="nav-link active">Link 1</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">Link 2</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">Link 3</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">Link 4</a>
        </li>
        <li class="nav-item dropdown ml-auto">
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Account</a>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Separated link</a>
            </div>
        </li>
    </ul>
</div>

http://www.codeply.com/go/hhV1aM49zz

这篇关于Bootstrap 4 Alpha 6导航选项卡右对齐项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！