Сохраняйте начальные поля загрузочного ввода в строке

Question

Я борюсь со своей проблемой, у меня есть 4 поля ввода, которые должны отображаться в одной строке. Каждое поле также имеет метку, и длина текста этой метки может отличаться.

Упрощенная версия моей проблемы

<div class="container"> 
    <div class="row"> 
     <div class="col-md-3"> 
      <label>text</label> 
      <input class="form-control"> 
     </div> 
     <div class="col-md-3"> 
      <label>text</label> 
      <input class="form-control"> 
     </div> 
     <div class="col-md-3"> 
      <label>text</label> 
      <input class="form-control"> 
     </div> 
     <div class="col-md-3"> 
      <label>text text text text text text text text text text text text text text text text text text text</label> 
     <input class="form-control"> 
     </div> 
    </div> 
</div> 

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

Как вы можете видеть здесь последний вход поле не соответствует другим, потому что текст метки занимает 2 строки. Есть ли способ исправить это?

Answer 1

Вы должны form-group внутри col-md-12 контейнер

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-12 col-md-3"> 
      <div class="form-group"> 
      <label for="exampleInputPassword1">Password</label> 
      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> 
      </div> 
     </div> 
     <div class="col-xs-12 col-md-3"> 
      <div class="form-group"> 
      <label for="exampleInputPassword1">Password</label> 
      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> 
      </div> 
     </div> 
     <div class="col-xs-12 col-md-3"> 
      <div class="form-group"> 
      <label for="exampleInputPassword1">Password</label> 
      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> 
      </div> 
     </div> 
     <div class="col-xs-12 col-md-3"> 
      <div class="form-group"> 
      <label for="exampleInputPassword1">Password</label> 
      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> 
      </div> 
     </div> 
    </div> 
</div> 

col-xs-12 не является обязательным. https://jsfiddle.net/vladavip88/qfdbg022/

Answer 2

Установите высоту этикетки в запросе на медиа;

@media(min-width:992px){ /* default bootstrap md width */ 
    label { 
    min-height:70px; /* adjust as appropriate */ 
    } 
} 

В приведенном выше примере будет давать элементов маркировки высоту 70px, когда ширина страницы, является> = 992px

https://jsfiddle.net/ue7bn8qd/12/

Answer 3

Есть два свойства CSS в классе форм-управления.

1. дисплей: блок;

2. ширина: 100%;

Из-за этих свойств поля ввода ведут себя как блок. Вот почему они не встроены. Измените эти 2 свойства, чтобы получить введенные поля ввода.