Question

我有一个非常简单的Bootstrap 3水平表格，其中一行3列
第1列是引用第2列的标签
第2列是输入文本框
第3列是描述性文字

第1列与column2文本框垂直对齐，但column3似乎比另一个高。

我做错了什么？

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<form class="form-horizontal" name="frmBuscar" id="frmBuscar" method="post">
<div class="form-group">
<label class="control-label col-lg-6" for="txt1">Campo 1:</label>
<div class="col-lg-3">
<input name="txt1" id="txt1" value="100" class="form-control">
</div>
<div class="col-lg-3 ">
Unidad 1
</div>
</div>
</form>
</body>
</html>

Answer 1

我认为使用列不一定是解决此问题的最佳方法；您可以在display: flex容器上使用.form-group并将所有内容对准容器的末端；另外，您还需要删除label的边距，然后就可以了。

由于某种原因，我无法仅使用提供的HTML来获得图片的外观，但是我使用的CSS几乎以相同的方式工作，第二种形式是您的标记

.form-group {
  display: flex;
  align-items: flex-end;
}

label {
  margin-bottom: 0px !important;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<form class="" name="frm" id="frm">
  <div class="form-group">
    <label class="" for="txt1">
              Campo 1:
         </label>
    <div class="">
      <input name="txt1" id="txt1" value="100" class="form-control">
    </div>
    <div class="">
      Unidad 1
    </div>
  </div>
</form>


<form class="form-horizontal" name="frm" id="frm">
  <div class="form-group">
    <label class="control-label col-lg-6" for="txt1">
              Campo 1:
         </label>
    <div class="col-lg-3">
      <input name="txt1" id="txt1" value="100" class="form-control">
    </div>
    <div class="col-lg-3">
      Unidad 1
    </div>
  </div>
</form>

Answer 2

更改此

<div class="col-lg-3">
       Unidad 1 
</div>

TO

<div class="control-label  col-lg-1">
       Unidad 1
</div>

水平形式上的文字未垂直对齐

2 个答案: