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

Question

我想创建一个选项卡菜单，有2个选择菜单的最右侧的选项。

下面是我所拥有的基础知识，但我似乎无法让选择一直漂浮到右边。

有什么想法？我知道这可能是导航项阻止我这样做，但我想继续保持去所有的方式下边框所以会出现“无缝”

<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已更改为float-right在最新的阿尔法6.