Fatal编程技术网
  • html/
  • Html 引导表单字段在布局中未对齐

Html 引导表单字段在布局中未对齐

html css twitter-bootstrap

Html 引导表单字段在布局中未对齐,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我希望引导中的表单在同一行上呈现两个文本字段，每个输入后面都有文本： 标签1A输入1A文本1A标签1B输入1B文本1B 标签2A输入2A文本2A标签2B输入2B文本2B 基本上，同一行上的两个输入是相关的，所以我希望它们彼此相邻。我已经完成了使用这个标记的工作： <form class="inline-form"> <div class="col-sm-8"> <div class="form-group"> <label for

我希望引导中的表单在同一行上呈现两个文本字段，每个输入后面都有文本：

标签1A
输入1A
文本1A
标签1B
输入1B
文本1B

标签2A
输入2A
文本2A
标签2B
输入2B
文本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>


ABCDEFG
单位
单位
ABCD
单位
单位
另见。如果您扩大HTML输出，您应该会看到我描述的效果

问题是表单字段没有对齐，对于小屏幕来说，布局变得非常混乱

首先，我希望在标准桌面浏览器中查看时，所有字段都能很好地对齐。我尝试过各种课程，但都没有成功

但如果有更好的方法，我也很乐意听到

谢谢你的帮助

要对齐这些输入框，需要在标签上设置相等的宽度。由于标签是内联元素，而标签具有不同的文本，它们的大小将不同，因此下面的框将紧跟其后

对于上面的示例，您可以使用以下内容

label{
  width: 80px;
}
但是上面的css将加宽文本“units”的宽度，为了解决这个问题，您可以通过将类指定给不相等的标签来稍微更新标记&然后像下面这样声明它们的宽度

<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>
还有一个没有标记更改的解决方案

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


标签{宽度：12%；}
ABCDEFG
单位
单位
ABCD
单位
单位
需要为
控制标签添加固定的
宽度



。控件标签{
宽度：15%；
文本对齐：居中；
}



标签1A
单位
标签1B
单位
标签2A
单位
标签2B
单位

如果我明白你想要什么，它会起作用的。
尝试以下方法：

这个想法是玩网格，划分每一行（使用网格的引导）和每一行的内部，根据需要再次划分。
这应该足够了，但是如果您有任何问题，您可以在需要的地方添加pullright和pullleft类。这些类在网格的引导列中设置为左或右

此外，您可以添加此样式或类以确保不重叠层/div

空白：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>




ABCDEFG
单位
单位


使用此代码，您将有一行包含两个大小相同的部件。在第一部分中，你也有两个部分，其中一个比另一个加倍。在这些零件内部，左侧有一个标签（向左拉），右侧有一个标签输入（向右拉）

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


Cheers mate
试试这段代码，它可能会解决您的问题。您需要在行内定义COL。因此，在本文中，我定义了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>




ABCDE35
单位
单位
ABCD
单位
单位

是否包含引导js和css？@AshishPatel是的。如果你看一下小提琴，你会发现两者都包括在内。对于1个标签，有2个输入框和2个值。对吗？@Leothelion是的，类似于标签、输入框、文本、输入框、文本。在这个例子中，我有两个标签，但第二个是空的。

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



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