当某些标签跨越多行时，如何垂直对齐表单控件？

Question

Using Bootstrap 3, I have a horizontal form with labels on top of the controls. When one of the labels is too long, the text is wrapped to the next line (which is fine). However, this shifts the input box down (see below). How can I align the other input vertically so that it doesn't look weird?

Example:

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

This looks like this:

But I would like it to look like this:

Here's a JSFiddle example: https://jsfiddle.net/13c420x6/2/

Answer 1

Would is be an idea to use CSS Grid Layout ? I striped of some of the elements to make the example more clear.

 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>

You can also use CSS Flexbox . The label element can just wrap the input element. Then you can remove the for attribute.

 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

You can use justify-content: space-between but you need to assign display: flex and make a flex-direction: column . Since there is no pre built in class in bootstrap 3. You should do this in your CSS file

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

And I am suggest you to shift to bootstrap 4. Since it has more pre built classes and more.

Bootstrap 4 Answer (You can compare it with upper one).

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

Answer 3

You can use Flex to make it work.

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