Question

我想在Bootstrap中创建一个表单，在同一行上呈现两个文本字段，每个输入后面都有文本：

Label 1A Input 1A Text 1A Label 1B Input 1B Text 1B

Label 2A Input 2A Text 2A Label 2B Input 2B Text 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

如果我明白你想要什么，那就行了。试试这种方法：

这个想法是在玩网格，将每一行（使用网格的引导程序）和每行内部分开，然后再根据需要进行划分。它应该足够了，但是如果你有任何问题，可以在你需要的地方添加pull-right和pull-left类。这些类在网格引导列的左侧或右侧设置。

此外，您可以添加此样式或类以确保您不会重叠layer / 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>

使用此代码，您将拥有一行，其中两个部分具有相同的大小。在第一部分内部，你也有两部分，其中一部分比另一部分复制一部分。在这些部分的内部，左侧有一个标签（向左拉），右侧有一个标签（向右拉）。

如果您有任何疑问，请告诉我。

干杯队友

Answer 2

要对齐它们输入框，您需要在标签上设置相等的宽度。由于标签是内联元素，而您的标签有不同的文本，它们的大小会有所不同，所以下面的框就在它之后。

对于上面的示例，您可以拥有以下内容

label{
  width: 80px;
}

但是上面的css会扩大文本“单位”的宽度来解决这个问题，你可以通过将类分配给不相等的标签来更新你的标记。然后像下面那样在它们上面声明宽度

<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 3

<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 4

需要为width

添加固定的control-label

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 5

试试这个代码它可以解决你的问题。你需要在行中定义col。在这个i定义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>

Bootstrap表单字段未在布局

5 个答案: