bootstrap align form/selects with nav tabs

Question

Я пытаюсь создать меню вкладок, в котором есть два варианта выбора в крайнем правом углу меню.

Ниже приведены основы того, что у меня есть, но я не могу заставить выборки плавать полностью вправо.

Любые мысли? Я знаю, что это, вероятно, нав-вещь мешает мне делать это, но я хочу, чтобы сохранить нижнюю границу, которая идет через все так кажется «бесшовным»

<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 в последней версии Alpha 6.