Question

我正在使用Bootstrap 4.0 beta 2并尝试使用form-row和col-*类将标签和表单控件水平对齐在一行中。

现在我尝试将这两个form-row结构中的两个对齐在一行中，请参阅fiddle（运行时使用HD分辨率）。但我不知道为什么第一行的第一个输入没有与第二行的输入字段垂直对齐。我现在已经挣了几个小时并且使用了不同的类form-inline，row等等，并尝试使用边距和填充类，但没有运气。

无法更改DOM，只应用类。谁能帮帮我？

Answer 1

问题是你的第一列还有form-row，在另一行内创建一行。应该从不成一行内的行;仅使用行内的列。这些行添加了额外的填充（15px为row，5px为form-row，这会在嵌套时干扰基于百分比的宽度和偏移。

您需要将其从label + div中取出，而不是将第二个form-row嵌套在新form-row内，而是将其放在form-row的{{1}}内。 第一次 label + div。在此之后，您需要调整两个col-md组合的label+ div计数以适应。

我已经分别与2和3一起离开了，因为总共有10（（2 + 3） +（2 + 3）），等于第二行的总和（2 + 8）。

我创建了一个展示 here 的小提琴，您还可以通过最大化以下代码段来看到这一点：

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

<form>
  <fieldset>
    <div class="form-row">
      <label class="col-form-label col-md-2 col-sm-12">LABEL</label>
      <div class="col-md-3 col-sm-12">
        <input type="text" class="form-control">
      </div>
      <label class="col-form-label col-md-2 col-sm-12">LABEL</label>
      <div class="col-md-3 col-sm-12">
        <input type="text" class="form-control">
      </div>
    </div>
    <div class="form-row mt-2">
      <label class="col-form-label col-md-2 col-sm-12">LABEL</label>
      <div class="col-md-8 col-sm-12">
        <input type="text" class="form-control">
      </div>
    </div>
  </fieldset>
</form>

＆＃13;

希望这有帮助！：）

仅CSS解决方案：

假设您无法修改DOM，您可以 always fall back to CSS ：

＆＃13;

.form-row.mt-2 {
  width: 100%;
}

@media screen and (min-width: 768px) {
  .form-row.mt-2>div {
    padding-left: 4px;
    padding-right: 13px;
  }
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />

<form>
  <fieldset>
    <div class="form-row">
      <div class="form-row col-md-6 col-sm-12">
        <label class="col-form-label col-md-4 col-sm-12">LABEL</label>
        <div class="col-md-4 col-sm-12">
          <input type="text" class="form-control">
        </div>
      </div>
      <div class="form-row col-md-6 col-sm-12">
        <label class="col-form-label col-md-4 col-sm-12">LABEL</label>
        <div class="col-md-4 col-sm-12">
          <input type="text" class="form-control">
        </div>
      </div>
    </div>
    <div class="form-row mt-2">
      <label class="col-form-label col-md-2 col-sm-12">LABEL</label>
      <div class="col-md-8 col-sm-12">
        <input type="text" class="form-control">
      </div>
    </div>
  </fieldset>
</form>

＆＃13;

尽管如此，DOM修改将是更优选的解决方案：）

Answer 2

检查摘录。

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" />
<form class="col-12">
	<div class="form-row">
		<div class="col-md-6 col-12">
       <div class="form-row">
        <label class="col-form-label col-md-4 col-12">LABEL</label>
        <div class="col-md-8 col-12">
          <input type="text" class="form-control">
        </div>
       </div>
		</div>
		<div class="col-md-6 col-12">
       <div class="form-row">
        <label class="col-form-label col-md-4 col-12">LABEL</label>
        <div class="col-md-8 col-12">
          <input type="text" class="form-control">
        </div>
       </div>
		</div>
	</div>
	<div class="form-row align-items-center mt-2">
		<label class="col-form-label col-md-2 col-12">LABEL</label>
		<div class="col-md-10 col-12">
			<input type="text" class="form-control">
		</div>
	</div>
</form>

多个水平嵌套表单行

2 个答案:

仅CSS解决方案：