Bootstrap - 當標籤跨越2行時，正確對齊控件標籤

我正在使用引導控件組和控件標籤。Bootstrap - 當標籤跨越2行時，正確對齊控件標籤

每個標籤/輸入我包裝它像這樣：

<div class="span5"> 
    <div class="control-group"> 
    <label class="control-label"> 
    <div class="controls"> 
     <input> 
     <div !-- some hidden help block --> 
     </div> 
    </div> 
    </div> 
</div>

我試圖將其中的兩個每行，所以我所有的人設置爲單排液

內span5

但是，我的一些標籤很長，並不適合劃分span5中的一行。所以唱片公司最終被分成多行，但只有第一行是垂直的線，象這樣輸入：

我想它，這樣，而不是第一線被垂直放置的，整個標籤是垂直對齊的（所以如果標籤是2行，則2行之間的間距與輸入垂直對齊）。

這有可能使用bootstrap？

來源

2017-08-24 user3504410

請分享JSFiddle上的代碼 –

我並不真正熟悉bootstrap，因爲很多這些都是由框架插入的。我試圖在jsfiddle中複製它，但控件標籤似乎顯示在輸入上方而不是旁邊。你知道這是爲什麼嗎？ http://jsfiddle.net/v9ec3/1245/ – user3504410

你需要2塊相鄰放置嗎？或者你的問題是關於文本行空間的間距？ [Check this]（https://codepen.io/anon/pen/PKBWmV?editors=1111） –

我不知道我是否明白你想要做什麼。但是下面是我爲了實現我從問題中理解的內容所做的代碼。

<div class="container p-4"> 
      <div class="form-group row"> 
       <label for="input2" class="col-md-4 col-form-label text-right">Monthly Vacation Carried Over (Days)</label> 
       <div class="col-md-8"> 
        <input type="text" class="form-control" id="input2" style="width: 50%;"> 
       </div> 
      </div> 

      <div class="form-group row"> 
       <label for="input3" class="col-md-4 col-form-label text-right">Monthly Vacation Carried Over (Days)</label> 
       <div class="col-md-8"> 
        <input type="text" class="form-control" id="input3" style="width: 50%;"> 
       </div> 
      </div> 
     </div>

而小屏幕設備的樣式。

@media(max-width: 576px) { 
       .form-control { 
        width: 100% !important; 
       } 
       label { 
        text-align: left; 
       } 
      }

邊注：

我用引導V.4（測試版）。最新的。

來源

2017-08-24 19:07:21 Tes3awy

Bootstrap - 當標籤跨越2行時，正確對齊控件標籤

回答

相關問題