Bootstrap 3: выпадающий вытащил правый

Question

Мне нужно, чтобы выпадающий вынул право. В моем коде ниже выпадающее меню отлично потянуто вправо, но нажатие на раскрывающееся меню показывает варианты.

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-4"> 
      <button class="btn btn-info">Button</button> 
     </div> 
     <div class="col-md-8"> 
      <form class="form-inline pull-right" role="form"> 
       <div class="form-group"> 
        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></a> 
        <ul class="dropdown-menu"> 
         <li><a href="javascript:void(0)">Option A</a></li> 
         <li><a href="javascript:void(0)">Option B</a></li> 
        </ul> 
       </div>&nbsp;<input data-type="text" class="form-control" type="text" placeholder="Search..."> 
      </form> 
     </div> 
    </div> 
</div> 

Fiddle

Как можно выровнять варианты с выпадающим меню?

Благодаря

Answer 1

Добавить класс БТН-группы после того, как форм-группы

<div class="form-group btn-group"> 
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Dropdown 
<span class="caret"></span></a> 
    <ul class="dropdown-menu"> 
    <li><a href="javascript:void(0)">Option A</a></li> 
    <li><a href="javascript:void(0)">Option B</a></li> 
    </ul> 
</div> 

Вот Fiddle