bootstrap 将 form/selects 与导航标签对齐

Question

我正在尝试创建一个选项卡菜单，在菜单的最右侧有 2 个 select 选项。

以下是我所拥有的基础知识，但我似乎无法让 select 一直向右浮动。

有什么想法吗？我知道这可能是导航项目阻止我这样做，但我想保留一直穿过的底部边框，所以它显示 'seamless'

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <ul class="nav nav-tabs nav-fill">
                <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">
                    <div class="form-inline text-sm-right">
                        <select class="form-control form-control-sm">
                            <option>Option 1</option>
                        </select>
                        <select class="form-control form-control-sm">
                            <option>Option 2</option>
                        </select>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

fiddle

Answer 1

只需使用float-xs-right..

                <li class="nav-item float-xs-right">
                    <div class="form-inline">
                        <select class="form-control form-control-sm">
                            <option>Option 1</option>
                        </select>
                        <select class="form-control form-control-sm">
                            <option>Option 2</option>
                        </select>
                    </div>
                </li>

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

另请注意，在最新的 Alpha 6 中 float-xs-right 已更改为 float-right。

bootstrap 将 form/selects 与导航标签对齐

bootstrap align form/selects with nav tabs

css

twitter-bootstrap

bootstrap-4

twitter-bootstrap-4