div не будет выравниваться с кнопками в bootstrap

Question

У меня есть строка в верхней части моей страницы с четырьмя элементами. 2 кнопки, 1 раскрывающийся список и 1 поле ввода. Первые три элемента находятся в одном столбце div, а поле ввода - в отдельном.

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

<div class="row" style="padding-top: 15px;"> 
    <div class="col-md-8"> 
     <div class="form-group form-horizontal"> 
      <button class="btn btn-success" style="font-size: 22px;"> 
       Add New Project 
       <span class="ion ion-plus-circled"></span> 
      </button> 
      <button class="btn btn-danger" style="font-size: 22px;"> 
       Delete Project 
       <span class="ion ion-trash-a"></span> 
      </button> 
      <div class="dropdown"> 
       <button class="btn btn-default dropdown-toggle" 
         style="font-size: 22px;" 
         type="button" id="filter-dropdown" 
         data-toggle="dropdown" 
         aria-haspopup="true" 
         aria-expanded="true"> 
        Search By Status <span class="caret"></span> 
       </button> 
       <!-- List body handled in content-controller.js --> 
       <ul class="dropdown-menu" aria-labelledby="filter-dropdown"> 
        <li id="filter-na"></li> 
        <li id="filter-ontrack"></li> 
        <li id="filter-done"></li> 
        <li id="filter-issues"></li> 
        <li id="filter-behind"></li> 
        <li id="filter-abandoned"></li> 
       </ul> 
      </div> 
     </div> 
    </div> 
    <div class="col-md-4"> 
     <div class="form-group form-horizontal"> 
      <input type="text" class="form-control" 
        style="font-size: 22px;" 
        placeholder="Search" 
        name="srch-field" id="srch-field"> 
     </div> 
    </div> 
</div> 

В случае, если были интересны, вот код, который помещает элементы в выпадающем списке:

function CreateFilterDropdown() { 
    var na_filter = $('#filter-na'); 
    var ontrack_filter = $('#filter-ontrack'); 
    var done_filter = $('#filter-done'); 
    var issues_filter = $('#filter-issues'); 
    var behind_filter = $('#filter-behind'); 
    var abandoned_filter = $('#filter-abandoned'); 

    na_filter.append('<button class="btn status-circle" ' + 
      'style="background-color: ' + GetColumnColor('NA') + ';" disabled>' + 
      '</button>'); 
    ontrack_filter.append('<button class="btn status-circle" ' + 
      'style="background-color: ' + GetColumnColor('ON_TRACK') + ';" disabled>' + 
      '</button> On Track'); 
    done_filter.append('<button class="btn status-circle" ' + 
      'style="background-color: ' + GetColumnColor('DONE') + ';" disabled>' + 
      '</button> Done'); 
    issues_filter.append('<button class="btn status-circle"' + 
      'style="background-color: ' + GetColumnColor('ISSUE') + ';" disabled>' + 
      '</button> Issue'); 
    behind_filter.append('<button class="btn status-circle"' + 
      'style="background-color: ' + GetColumnColor('BEHIND') + ';" disabled>' + 
      '</button> Behind'); 
    abandoned_filter.append('<button class="btn status-circle"' + 
      'style="background-color: ' + GetColumnColor('ABANDONED') + ';" disabled>' + 
      '</button> Abandoned'); 
} 

Answer 1

Добавить display: inline-block; ваши ниспадающие дела.

<div class="dropdown" style="display:inline-block;"> 

JsFiddle Example

Answer 2

Вы должны либо добавить стиль CSS = "дисплей: встроенный блок;" или добавить класс тянуть налево к разделу

<div class="dropdown" style="display:inline-block;"> 

(или)

<div class="dropdown pull-left"> 

Answer 3

Вы пытались добавить поплавком: слева; к вашим колонкам divs?

<div class="col-md-8" style="float:left;"> 
<div class="col-md-4" style="float:left;"> 

и т.д. - он работал на меня в JSF - не уверен, что если его лучшая практика, хотя :)