Выравнивание иконок в начальной загрузки заголовка

Question

https://jsfiddle.net/5nj5nmqz/3/

<h1 class="page-header row"> 
     Header 
     <div class="col-md-4"> 
      <a href="#" class="btn btn-default"> 
       Export spreadsheet 
       <i class="fa fa-download"></i> 
      </a> 
     </div> 
     <div class="col-md-4 form-group has-feedback"> 
      <input type="text" class="form-control search pull-right" placeholder="Search by check name..."> 
      <span class="glyphicon glyphicon-search"></span> 
     </div> 
</h1> 

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

Любые идеи о том, как это можно сделать правильно? Я попробовал обернуть строки и перемещать столбцы, но, похоже, он отключается каждый раз.

Answer 1

Попробуйте это.

<h1 class="page-header">Header</h1> 
<div class="row"> 
    <div class="col-md-4"> 
     <a href="#" class="btn btn-default pull-right export"> 
      Export spreadsheet 
      <i class="fa fa-download"></i> 
     </a> 
    </div> 

    <div class="col-md-4 form-group has-feedback pull-right"> 
     <div class="form-group has-feedback"> 
      <input type="text" class="form-control search pull-right" placeholder="Username" /> 
      <i class="glyphicon glyphicon-search form-control-feedback"></i> 
     </div> 
    </div> 
</div> 

Мало что отметить:

<h1 class="page-header row"> неправильно. При использовании бутстрапа col s вы должны создать строку, просто указав <div class="row">.

Бутстрап может иметь по 12 столбцов в строке Я думаю. Если вы проектируете путь столбцов строки, правильным способом является создание <div class="row">, и его дети должны быть <div class="col-**-n">, где n всех детей составляет до 12.