Задачи выравнивания входной группы Bootstrap

Question

Моя аддонная группа добавок не совпадает с моим текстовым полем ввода ... что я делаю неправильно?

<div class="form-group"> 
    <label for="primary">Primary:</label> 
    <div class="input-group"> 
     <span class="input-group-addon glyphicon glyphicon-earphone"></span> 
     <input maxlength="20" class="form-control" name="primary" id="primary" placeholder="Primary" type="text"> 
    </div> 
</div> 

Приведенный выше код делает это:

Аддон является 1px ниже текстовое поле, но я не могу понять, почему!

http://www.bootply.com/iR1SvOyEGH

Answer 1

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

Эта проблема возникает в хроме ..

просто сделать некоторые изменения

<div class="form-group"> 

     <div class="col-md-12"> 
     <div class="col-md-1"> 
      <label for="primary">Primary:</label> 
      </div> 
      <div class="col-md-4"> 
       <div class="input-group"> 
        <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span> 
        <input maxlength="20" class="form-control" name="primary" id="primary" placeholder="Primary" type="text"> 
       </div> 
      </div> 


      </div> 
     </div> 

Answer 2

Я изменил код bootply. This может делать то, что вы хотите. Вместо добавления класса form-group в ваш родительский элемент введите input-group класс и переместите label за его пределами.

Edit:

К сожалению, сейчас я вижу вашу проблему. Проблема заключается в том, что вы используете глификоны во входной группе. Ответ stackoverflow может помочь.

Answer 3

Это легко исправить: glyphicon имеет класс по умолчанию в CSS с верхней: 1px;

Вам нужно снять это, создав свой собственный класс или просто изменив его, если это единственное место, где вы используете глификон. Я не уверен, почему они делают это по умолчанию, но это определенно сделает ваши глаза грустными. Все это выглядит, как это в CSS:

.glyphicon { 
    position: relative; 
    top: 1px; <----------------------------- Here is your culprit 
    display: inline-block; 
    font-family: 'Glyphicons Halflings'; 
    font-style: normal; 
    font-weight: normal; 
    line-height: 1; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale;