Bootstrap：表單組中的垂直居中標簽

Question

我有一個水平形式的表單組。 在此表單組中，右側元素高於左側元素。 出於這個原因，我想將左側元素垂直居中於其行中。 例如：

<form class="form-horizontal">
    <div class="form-group">
      <label for="inputEmail3" class="col-sm-2 control-label">Email1</label>
      <div class="col-sm-10"> <!-- higher element -->
        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
        <br>Random stuff
      </div>
    </div>
    <div class="form-group">
      <label for="inputEmail3" class="col-sm-2 control-label">Email2</label>
      <div class="col-sm-10"> 
        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
      </div>
    </div>
</form> 

Email1當前顯示在其自己行的頂部， 如此plunker片段中所示 。

編輯：所以為了澄清我的意圖，這是目前的狀態：

這就是我想要的（藍色區域是前面提到的“行”）：

Answer 1

如果您准備放棄對某些“舊”瀏覽器的支持，可以使用flexbox功能（請參閱caniuse.com flex ）

<div class="form-group flex-group">
  <label for="inputEmail3" class="col-sm-2 control-label">Email1</label>
  <div class="col-sm-10">
    <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    <br>Random stuff
  </div>
</div>

@media (min-width: 768px) {
  .flex-group {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
            align-items: center;
  }
  .form-horizontal .flex-group .control-label {
    padding-top: 0;
  }
}

http://plnkr.co/edit/BQ6C4LGiL4oe1ZQTQ3Ys

Answer 2

您可以使用CSS將行高設置為等於高度。 另外，不要重復域ID，只能使用id =“inputEmail3”一次。 我更改了兩個ID以適合文本。

CSS

label[for="inputEmail3"]{
    height: 74px;
    line-height: 74px;
}

HTML

<form class="form-horizontal">
    <div class="form-group">
      <label for="inputEmail3" class="col-sm-2 control-label">Email1</label>
      <div class="col-sm-10"> <!-- higher element -->
        <input type="email" class="form-control" id="inputEmail1" placeholder="Email">
        <br>Random stuff
      </div>
    </div>
    <div class="form-group">
      <label for="inputEmail3" class="col-sm-2 control-label">Email2</label>
      <div class="col-sm-10"> 
        <input type="email" class="form-control" id="inputEmail2" placeholder="Email">
      </div>
    </div>
</form> 

Answer 3

如果你只想讓label1像你的圖像一樣下拉，你不能只添加一個類給它一些填充頂部嗎？ 就像在這個jsfiddle

不清楚你是想要全部掉落還是只是標簽1。

CSS

.label1{padding-top:35px !important}

HTML

<form class="form-horizontal">
<div class="form-group">
  <label for="inputEmail3" class="label1 col-sm-2 control-label">Email1</label>
  <div class="col-sm-10"> <!-- higher element -->
    <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    <br>Random stuff
  </div>
</div>
<div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">Email2</label>
  <div class="col-sm-10"> 
    <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
  </div>
 </div>
</form> 

Answer 4

你可以這樣做：

.form-horizontal .form-group {
    transform-style: preserve-3d;
}
.form-horizontal .vertically-aligned-label {
    position: relative;
    top: 50%;
    transform: translateY(50%);
}

Answer 5

如果在小型設備上查看，您還需要控制此項，因為標簽將位於輸入的頂部。

我已經為你添加了一些更多的引導程序來覆蓋這個。

看到這個小提琴 。

<div class="container block ">

<div class="col-md-6 col-md-offset-3 col-sm-7 col-sm-offset-2 col-xs-11 col-xs-offset-0">    
<form class="form-horizontal">
    <div class="row block bg-info form-group">
    <label for="inputEmail3" class="label1 col-sm-2 col-xs-2 control-label">Email1</label>
        <div class="col-md-8 col-sm-9 col-xs-9 col-xs-push-1"> <!-- higher element -->
        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
        <br>Random stuff
        <br>Random stuff 
        <br>Random stuff  
        </div>
    </div>
    <div class="row block bg-info form-group">
    <label for="inputEmail3" class="label2 col-sm-2 col-xs-2 control-label">Email2</label>
        <div class="col-md-8 col-sm-9 col-xs-9 col-xs-push-1"> 
        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
        </div>
        </div>
</form> 
</div>
</div>