Twitter Bootstrap 3: вход надстройки с валидацией Ошибка

Question

Итак, у меня возникла интересная проблема с Twitter Bootstrap 3 .. Кажется, есть проблема с форматированием при выполнении проверки надстройки над встраиванием. Надстройка get сдвигается по размеру, а в случае нажатия кнопки только сдвигается. Напрямую от начальной загрузки страницы щебет

<div class="input-group has-success"> 
     <label class="control-label" for="inputSuccess1">Input with success</label> 
     <input type="text" class="form-control"/> 
     <span class="input-group-btn"> 
     <button class="btn btn-default" type="button">Go!</button> 
     </span> 
    </div> 

выглядит следующим образом

Вот JSFiddle играть с

http://jsfiddle.net/HdxT3/

Мысли о том, как это исправить?

Answer 1

Нет необходимости в всех модификациях CSS. Bootstrap позволяет сделать это изначально:

<div class="form-group has-success"> 
    <label class="control-label" for="inputSuccess1">Input with success</label> 
    <div class="input-group">  
     <input type="text" class="form-control"/> 
     <span class="input-group-btn"> 
      <button class="btn btn-default" type="button">Go!</button> 
     </span> 
    </div> 
</div> 

Answer 2

Я изменил структуру немного, и добавил некоторые css

наценка

<div class="input-group has-success"> 
     <label class="control-label" for="inputSuccess1">Input with success 
     <span class="input-group-btn"> 
     <input type="text" class="form-control"/> 
     <button class="btn btn-default" id="style" type="button">Go!</button> 
     </span>  
     </label> 
    </div> 

CSS

#style{ 

    margin-left: -4px; 
    border-bottom-right-radius: 5px; 
    border-top-right-radius: 5px; 
    border-left: none; 
} 

Образец Fiddle

Answer 3

В вашем CSS:

.control-label{ 
    display: table-caption; 
} 

http://jsfiddle.net/HdxT3/3/