Bootstrap поля формы не выстраиваясь в макете

Question

Я хочу форму в Bootstrap, который отображает два текстовых поля на той же строке, с текстом после каждого ввода:

Label 1AInput 1AText 1A         Label 1BInput 1BText 1B

Label 2AText 2A         Label 2BInput 2BText 2B

В принципе, два входа на одной линии связаны друг с другом, поэтому я хочу их рядом друг с другом. Я вроде достигнуто, что с помощью этой разметки:

<form class="inline-form"> 
    <div class="col-sm-8"> 
    <div class="form-group"> 
     <label for="input1" class="control-label">ABCDEFG</label> 
     <input type="text" name="input1" id="input1"> units 
     <label for="input1_max" class="control-label"></label> 
     <input type="text" name="input1_max" id="input1_max"> units 
    </div> 
    <div class="form-group"> 
     <label for="input2" class="control-label">ABCD</label> 
     <input type="text" name="input2" id="input2"> units 
     <label for="input2_max" class="control-label"></label> 
     <input type="text" name="input2_max" id="input2_max"> units 
    </div> 
    </div> 
</form> 

Также см this fiddle. Если вы расширите вывод HTML, вы увидите эффект, который я описываю.

Проблема с этим полем формы не выровнены, и макет становится действительно жутким для небольших размеров экрана.

Прежде всего, я хотел бы, чтобы все поля были хорошо совмещены при просмотре в стандартном браузере. Я пробовал разные классы без успеха.

Но если есть лучший способ сделать это, я тоже хотел бы услышать это.

Благодарим за помощь и помощь!

Answer 1

Чтобы выровнять поля ввода, вам необходимо установить равную ширину на этикетках. Поскольку метки являются встроенным элементом, в то время как ваши метки имеют разные тексты, их размеры будут разными, поэтому следующие поля будут сразу после него.

Для приведенного выше примера вы можете иметь это следующий

label{ 
    width: 80px; 
} 

Но выше CSS расширит ширину текста «единицы», чтобы решить эту проблему, вы можете обновить разметку немного, присвоив класс к не равные метки & затем объявить ширину на них, как follwoing

в

<form class="inline-form"> 
    <div class="col-sm-8"> 
    <div class="form-group"> 
     <label for="input1" class="control-label first-label">ABCDEFG</label> 
     <input type="text" name="input1" id="input1"> units 
     <label for="input1_max" class="control-label"></label> 
     <input type="text" name="input1_max" id="input1_max"> units 
    </div> 
    <div class="form-group"> 
     <label for="input2" class="control-label first-label">ABCD</label> 
     <input type="text" name="input2" id="input2"> units 
     <label for="input2_max" class="control-label"></label> 
     <input type="text" name="input2_max" id="input2_max"> units 
    </div> 
    </div> 
</form> 

И назначение ширины к классу

.first-label{ 
    width: 80px; 
} 

Существует еще одно решение без изменения разметки

.form-group label:first-of-type{ 
    width: 80px; 
} 

Answer 2

<style> 
label { width: 12%; } 
</style> 
<form class="inline-form"> 
    <div class="col-sm-8"> 
     <div class="form-group"> 
      <label for="input1" class="control-label">ABCDEFG</label> 
      <input type="text" name="input1" id="input1"> units    
      <input type="text" name="input1_max" id="input1_max"> units 
     </div> 
     <div class="form-group"> 
      <label for="input2" class="control-label">ABCD</label> 
      <input type="text" name="input2" id="input2"> units    
      <input type="text" name="input2_max" id="input2_max"> units 
     </div> 
    </div> 
</form> 

Answer 3

Нужно добавить фиксированную width для вашего control-label

.control-label { 
 
    width: 15%; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<form class="inline-form"> 
 
    <div class="col-sm-8"> 
 
    <div class="form-group"> 
 
     <label for="input1" class="control-label">Label 1A</label> 
 
     <input type="text" name="input1" id="input1">units 
 
     <label for="input1_max" class="control-label">Label 1B</label> 
 
     <input type="text" name="input1_max" id="input1_max">units 
 
    </div> 
 
    <div class="form-group"> 
 
     <label for="input2" class="control-label">Label 2A</label> 
 
     <input type="text" name="input2" id="input2">units 
 
     <label for="input2_max" class="control-label">Label 2B</label> 
 
     <input type="text" name="input2_max" id="input2_max">units 
 
    </div> 
 
    </div> 
 
</form>

Answer 4

Если я понимаю, что вы хотите это будет работать. Попробуйте использовать такой подход:

Идея игры с сеткой, разделяющая каждую строку (с использованием начальной загрузки сетки) и внутри каждой строки, делясь снова, как вам нужно. Этого должно быть достаточно, но если у вас есть какие-либо проблемы, вы можете добавить класс pull-right и pull-left, где вам это нужно. Эти классы устанавливаются влево или вправо внутри столбца бутстрапа сетки.

Кроме того, вы можете добавить этот стиль или класс для обеспечения безопасности, если вы не перекрываете слои/div.

white-space: nowrap;

<form class="form-inline" role="form"> 
<div class="form-group col-lg-6 col-md-6 col-xs-6"> 
    <div class="form-group col-lg-8 col-md-8 col-xs-8"> 
     <label for="input1" class="control-label first-label pull-left">ABCDEFG</label> 
     <input type="text" name="input1" id="input1" class="pull-right"> units 
    </div> 
    <div class="form-group col-lg-4 col-md-4 col-xs-4"> 
     <label for="input1_max" class="control-label"></label> 
     <input type="text" name="input1_max" id="input1_max" class="pull-right"> units 
    </div> 
</div> 
<div class="form-group col-lg-6 col-md-6 col-xs-6 pull-right"> 
<!-- REPEAT THE SAME IDEA --> 
</div> 
</form> 

С помощью этого кода у вас есть один ряд с 2 частями того же размера. Внутри первой части у вас есть две части, одна из которых двойная, а другая. Внутри этой части у вас есть метка слева (pull-left), и она вводится справа (справа).

Если у вас есть какие-либо сомнения, сообщите мне.

Приветствия спариваться

Answer 5

попробуйте этот код может решить problem.you нужно определить COLS внутри строки .so в этом я определить 2 строки и каждый из них имеет 4 колонки для мобильного телефона, а также рабочий стол.

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

<!-- jQuery library --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

<!-- Latest compiled JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    </head> 
    <body> 
<form class="inline-form"> 
    <div class="form-group"> 
<div class="row"> 
    <div class="col-md-3 col-xs-3 "> 

     <label for="input1" class="control-label">ABCDE35</label> 
    </div> 
    <div class="col-md-3 col-xs-3 "> 
     <input type="text" name="input1" id="input1"> units 
     </div> 

    <div class="col-md-3 col-xs-3 "> 

     <label for="input1_max" class="control-label"></label> 
    </div> 
    <div class="col-md-3 col-xs-3 "> 
     <input type="text" name="input1_max" id="input1_max"> units 
     </div> 
</div> 
</div> 
    <div class="form-group"> 
<div class="row"> 

    <div class="col-md-3 col-xs-3 "> 
<label for="input2" class="control-label">ABCD</label> 
    </div> 
    <div class="col-md-3 col-xs-3 "> 
     <input type="text" name="input3" id="input3"> units 
     </div> 

    <div class="col-md-3 col-xs-3 "> 
     <label for="input3_max" class="control-label"></label> 
    </div> 
    <div class="col-md-3 col-xs-3 "> 
     <input type="text" name="input3_max" id="input3_max"> units 
     </div> 
    </div> 
</div>    
</form> 
    </body> 
</html>