Кнопка Bootstrap

Question

Я хочу, чтобы эта кнопка была выровнена по горизонтали, я использую bootstrap.min.js v3.0.0, bootstrap.min.css, application.css.

<div class="row"> 
<div class="col-lg-4 col-md-3 col-sm-4 col-xs-6 form-group"> 
    <label>Fecha desde</label> 
    <div class="input-group date datepicker" > 
     <input class="form-control col-md-12" type="text"> 
     <span class="input-group-addon"><i class="fa fa-calendar"></i></span> 
    </div> 
</div> 
<div class="col-lg-4 col-md-3 col-sm-4 col-xs-6 form-group"> 

    <label>Fecha cierre</label> 
    <div class="input-group date datepicker"> 
     <input class="col-md-12 form-control" type="text" /> 
     <span class="input-group-addon"><i class="fa fa-calendar"></i></span> 
    </div> 
</div> 
<div class="col-lg-4 col-md-6 col-sm-4 col-xs-12"> 
    <input type="button" class="btn btn-success" style="alignment-adjust:central;" value="Buscar" onclick="cargarLista();"/> 
</div> 

У меня есть:

Я хочу:

Я очень признателен за любую помощь вы можете предоставить!

Answer 1

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

Это одно из тех случаев.

Как поступить:

• вы оберточной кнопку <div> добавить класс, который называется Div align-bottom.
• затем создайте файл с именем application.css (если у вас его нет еще) в том же месте, как ваши CSS файлы и не забудьте поместить что <link> ниже начальной загрузки вызывает

, например:

<link href="/assets/css/bootstrap.min.css" rel="stylesheet" /> 
<link href="/assets/css/application.css" rel="stylesheet" /> 

и внутри этого application.css написать стиль:

.controls.align-bottom { 
    line-height: 90px; 
} 

Обратите внимание, что вам может понадобиться, чтобы чан e 90px вверх или вниз, чтобы сделать это правильно.

демо в JsBin: http://jsbin.com/vajut/2/edit?html,css,output

---

Это один из способов ... Есть другие, CSS действительно большая и прекрасная вещь!

Answer 2

Похоже, вы использовали <legend> на своих текстовых вводах. Легко исправить было бы добавить:

<legend>&nbsp;</legend> 

Для вашей кнопки ввода