Boostrap 3 вход с аддоном и справочным блоком

Question

Использование Bootstrap CSS 3.3.1, у меня возникла небольшая проблема с вводом с аддоном и блоком помощи.

Просто увидеть скрипку: https://jsfiddle.net/L8cyqoL1/1/

Испытано на Firefox/Chrome. Неправильно ли разметка? Я попробовал "вход-группа" ... как класс без успеха

Вот разметка:

<div class="form-group"> 
    <label for="title" class="control-label col-md-3">Titre de la page</label> 
    <div class="col-md-9 input-group"> 
     <div class="input-group-addon"> 
      @ 
     </div> 
     <input type="text" value="Value test" class="form-control input-xxlarge" id="title" name="title" size="46" /> 
      <span class="help-block">Help Lorem Ipsum</span> 
    </div> 
</div> 

Answer 1

Попробуйте так:

<div class="form-horizontal"> 
    <div class="form-group"> 
     <label for="title" class="control-label col-sm-3">Titre de la page</label> 
     <div class="col-sm-9"> 
      <div class="input-group"> 
       <span class="input-group-addon">@</span> 
       <input type="text" id="title" name="title" class="form-control" /> 
      </div> 
      <p class="help-block">Example block-level help text here.</p> 
     </div> 
    </div> 
</div> 

this updated fiddle См

(вытягивание на панели предварительного просмотра, чтобы увидеть поддержку столбцов)

Answer 2

Его штраф, чтобы пойти с принятым анвью er, но если вам все еще нужно help-block внутри input-group (мне нужно было поддержать мой рабочий javascript, чтобы отображать встроенные ошибки), есть обходное решение, которое поможет устранить проблему и поддерживает перекрестный браузер.

.input-group .help-block{ 
    display: table-row; 
} 

здесь скрипка: https://jsfiddle.net/L4joxj90/2/ (это только имеет ограничение, которое мы не можем использовать ввода-группы-аддон на левой стороне поля ввода)