Тот же текст строки не выровнен по вертикали

Question

У меня есть 3 компонента на лине, но он не выровнен по вертикали. Я попытался использовать вертикальное выравнивание, но это не меняет текст.

Как мы видим, инжекция не выровнена по вертикали с периодом.

Я создал демо

<div class="form-group"> 
    <label class="col-sm-3 control-lable"> 
    <input type="checkbox" name="injection" id="injection">Injection</label> 
    <label for="period" class="col-sm-3 control-label">Période (sem)</label> 
    <div class="col-sm-6"> 
     <input type="number" min="0" value="52" class="form-control" id="year" name="period" placeholder="Entrer la période en semaine" data-fv-integer="true" data-fv-integer-message="La valeur doit être numérique"> 
    </div> 
</div> 

http://jsfiddle.net/1ss81reg/

Кроме того, я заметил тогда, если я уменьшить и расти окна, проклейки компонента

Большой экран

Medium

Малый

Малый экран хотел большой один Большой экран должен нравится среднего.

Answer 1

Ваша структура HTML не имеет смысла; у вас есть columns и rows, вложенные друг в друга (что в любом случае не обязательно) и не используют какой-либо элемент container. Кроме того, rows не нужны с form-horizontal, так как в его месте используется form-group.

См. Рабочий пример Фрагмент. Может быть, это поможет.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div role="tabpanel"> 
 
    <ul class="nav nav-tabs" role="tablist"> 
 
    <li role="presentation" class="enable"><a href="#medicalTab" data-toggle="tab">Médical</a> 
 

 
    </li> 
 
    <li role="presentation" class="enable"><a href="#medicalTab2" data-toggle="tab">Médical 2</a> 
 

 
    </li> 
 
    </ul> 
 
</div> 
 
<div id='content' class="tab-content"> 
 
    <div role="tabpanel" class="tab-pane" id="medicalTab"> 
 
    <div class="container"> 
 
     <div id="lodgerMedicalContactDivTemplate"></div> 
 
     <form class="form-horizontal"> 
 
     <div class="form-group"> 
 
      <div class="col-sm-8 col-sm-offset-2"> 
 
      <label class="checkbox-inline"> 
 
       <input type="checkbox" name="medicate" id="medicate">Médicale</label> 
 
      <label class="checkbox-inline"> 
 
       <input type="checkbox" name="diabete" id="diabete">Diabète</label> 
 
      <label class="checkbox-inline"> 
 
       <input type="checkbox" name="injection" id="injection">Injection</label> 
 
      </div> 
 
     </div> 
 
     <div class="form-group"> 
 
      <label for="year" class="col-sm-2 control-label">Période (sem)</label> 
 
      <div class="col-sm-10"> 
 
      <input type="number" class="form-control" min="0" value="52" id="year" name="period" placeholder="Entrer la période en semaine"> 
 
      </div> 
 
     </div> 
 
     <div class="form-group"> 
 
      <label for="medicalDrawer" class="col-sm-2 control-label">Tiroir médicale</label> 
 
      <div class="col-sm-10"> 
 
      <select id="medicalDrawer" name="medicalDrawerId" class="form-control"></select> 
 
      </div> 
 
     </div> 
 
     <div class="form-group"> 
 
      <div class="col-sm-offset-2 col-sm-10"> 
 
      <button type="submit" class="btn btn-primary" id="lodgerMedicalSave">Sauvegarder</button> 
 
      </div> 
 
     </div> 
 
     </form> 
 
    </div> 
 
    </div> 
 
    <div role="tabpanel" class="tab-pane" id="medicalTab2">Content 2</div> 
 
</div>