Css 引导将表单/选择与导航选项卡对齐

我正在尝试创建一个选项卡菜单，该菜单的最右侧有两个选择选项

下面是我所拥有的基本知识，但我似乎无法让选择一直向右浮动

有什么想法吗？我知道这可能是导航项目阻止我这么做，但我想保持底部边界一直穿过，所以它看起来“无缝”

<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>

选择1
选择2

---

只需使用

右浮动xs即可

                <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>

选择1
选择2

另外，请注意，在最新的Alpha 6中，

float xs right

已更改为

float right