Форумы портала PHP.SU :: Версия для печати :: дизайн бутстрап-формы поломался если добавить в стили control-label класс

1. mstdmstd - 24 Мая, 2016 - 13:39:52 - перейти к сообщению

Всем привет,
Взял стандартную бутстрап форму
https://jsfiddle[dot]net/e214b0ab/14/
дизайн которой сразу поломался, если добавить в стили control-label класс
Имею в виду что лейблы отображаются сверху инпутов, а должны слева...
Как правильно ?

Спасибо !

2. igosja - 24 Мая, 2016 - 13:52:56 - перейти к сообщению

Классы col-sm-2 и control-label нужно вкладывать друг в друга:

CODE (htmlphp):
скопировать код в буфер обмена

<form class="form-horizontal">
 <div class="form-group">
  <div class="col-sm-2">
   <label for="mail" class="control-label">Email</label>
  </div>
  <div class="col-sm-10">
   <input type="email" class="form-control" id="mail" placeholder="Email">
  </div>
 </div>
 <div class="form-group">
  <div class="col-sm-2">
   <label for="pass" class="control-label">Пароль</label>
  </div>
  <div class="col-sm-10">
   <input type="password" class="form-control" id="pass" placeholder="Пароль">
  </div>
 </div>
 <div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
   <div class="checkbox">
    <label>
     <input type="checkbox"> Запомнить меня
    </label>
   </div>
  </div>
 </div>
 <div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
   <button type="submit" class="btn btn-success">Подтвердить</button>
  </div>
 </div>
</form>
 