当某些标签跨越多行时，如何垂直对齐 form-controls？

Question

使用 Bootstrap 3，我在控件顶部有一个带有标签的水平表单。当其中一个标签太长时，文本会换行到下一行（这很好）。但是，这会将输入框向下移动（见下文）。我怎样才能垂直对齐另一个输入使其看起来不奇怪？

示例：

<div class="form-group">
  <div class="row">
    <div class="col-sm-6">
      <label for="one">Label one</label>
      <input type="text" id="one" class="form-control">
    </div>
    <div class="col-sm-6">
      <label for="two">Label two is a very long label that will span at least two lines and shift the input box down a bit and make this form look really weird. How do I fix this?</label>
      <input type="text" id="two" class="form-control">
    </div>
  </div>
</div>

看起来像这样：

但我希望它看起来像这样：

这是一个 JSFiddle 示例：https://jsfiddle.net/13c420x6/2/

Answer 1

是否可以使用 CSS Grid Layout？我对一些元素进行了条纹处理，以使示例更加清晰。

div.form-group {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto;
}

.g1 {
  grid-column: 1;
  grid-row: 1;
}

.g2 {
  grid-column: 1;
  grid-row: 2;
}

.g3 {
  grid-column: 2;
  grid-row: 1;
}

.g4 {
  grid-column: 2;
  grid-row: 2;
}

@media screen and (max-width: 500px) {
  .g3 {
    grid-column: 1;
    grid-row: 3;
  }
  .g4 {
    grid-column: 1;
    grid-row: 4;
  }
}

<div class="form-group">
  <label class="g1" for="one">Label one</label>
  <input class="g2 form-control" type="text" id="one">
  <label class="g3" for="two">Label two is a very long label that will span at least two lines and shift the input box down a bit and make this form look really weird. How do I fix this?</label>
  <input class="g4 form-control" type="text" id="two">
</div>

您也可以使用 CSS Flexbox。 label 元素可以只包裹 input 元素。然后你可以删除 for 属性。

div.form-group {
  display: flex;
}

label {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media screen and (max-width: 500px) {
  div.form-group {
    flex-direction: column;
  }
}

<div class="form-group">
  <label>Label one<input class="form-control" type="text" id="one"></label>
  <label>Label two is a very long label that will span at least two lines and shift the input box down a bit and make this form look really weird. How do I fix this?<input class="form-control" type="text" id="two"></label>
</div>

Answer 2

您可以使用 Flex 使其工作。

.row {
  display: flex;
  flex-wrap: wrap;
}

.input-groups {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media (max-width: 768px) {
  .col-sm-6 {
    width: 100%;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
  <div class="row">
    <div class="col-sm-6 input-groups">
      <label for="one">Label one</label>
      <input type="text" id="one" class="form-control" />
    </div>
    <div class="col-sm-6 input-groups">
      <label for="two">Label two is a very long label that will span at least two lines
            and shift the input box down a bit and make this form look really
            weird. How do I fix this?</label
          >
          <input type="text" id="two" class="form-control" />
        </div>
      </div>
    </div>

Answer 3

您可以使用 justify-content: space-between，但您需要分配 display: flex 并创建 flex-direction: column。由于 bootstrap 中没有预先内置 class 3. 您应该在 CSS 文件中执行此操作

.row{
  display: flex;
}

.first-col{
   display: flex;
    flex-direction: column;
    justify-content: space-between;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<div class="form-group">
  <div class="row">
    <div class="col-sm-6  first-col">
      <label for="one">Label one</label>
      <input type="text" id="one" class="form-control">
    </div>
    <div class="col-sm-6">
      <label for="two">Label two is a very long label that will span at least two lines and shift the input box down a bit and make this form look really weird. How do I fix this?</label>
      <input type="text" id="two" class="form-control">
    </div>
  </div>
</div>

我建议你换成 bootstrap 4。因为它有更多的预建 classes 等等。

Bootstrap 4个答案（可以和上面的比较）

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

<div class="form-group">
  <div class="row">
    <div class="col-sm-6  d-flex flex-column justify-content-between">
      <label for="one">Label one</label>
      <input type="text" id="one" class="form-control">
    </div>
    <div class="col-sm-6">
      <label for="two">Label two is a very long label that will span at least two lines and shift the input box down a bit and make this form look really weird. How do I fix this?</label>
      <input type="text" id="two" class="form-control">
    </div>
  </div>
</div>

当某些标签跨越多行时，如何垂直对齐 form-controls？

How can I align form-controls vertically when some of the labels span multiple lines?

html

javascript

css

twitter-bootstrap

twitter-bootstrap-3