Question

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

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

有什么想法？我知道这可能是导航项目阻止我这样做但是我想保持底部边框一直穿过它所以它看起来是无缝的＆＃39;

<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

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

bootstrap对齐表单/选择导航选项卡

1 个答案: