如何垂直對齊長標籤，引導3

我有我旁邊的輸入很長的標籤，它不是垂直對齊。如何垂直對齊長標籤，引導3

請問有什麼方法可以解決嗎like it was in Bootstrap 2？

<form class="form-horizontal" role="form"> 
    <div class="form-group"> 
    <label for="input1" class="col-lg-2 control-label">Labdas kjas kljas dlkjasd lksjd  el1</label> 
    <div class="col-lg-10"> 
     <input type="text" class="form-control" id="input1" placeholder="Input1"> 
    </div> 
    </div> 
    <div class="form-group"> 
    <label for="input2" class="col-lg-2 control-label">Label2</label> 
    <div class="col-lg-10"> 
     <input type="password" class="form-control" id="input2" placeholder="Input2"> 
    </div> 
    </div> 
</form>

來源

2014-03-05 Martin Lunak

不是很乾淨......你需要一個覆蓋類添加到長標籤，如multiline，然後添加一個定義爲類，像這樣

.control-label.multiline 
{ 
    padding-top:0; 
}

來源

2014-03-05 22:11:05 Ted

可惜的是我怕我不能這樣做，因爲我的形式是由框架自動呈現。 –

這裏的另一種選擇，這可能會或可能不會基於您的實施工作。我用它來處理一些我需要'col'類來佔用它們行的全部高度的情況。本質上它告訴瀏覽器將其解釋爲表格。這應該允許您將標籤垂直對齊到中間。

我把它放在媒體查詢中，因爲它小於它爲我堆疊的。

/* addition for displaying bits as tables to gain cell features */ 
@media (min-width: 769px) { 
    .table-display{display:table; margin:0 -15px; width:100%; } 
    .table-display .row, .table-display .form-group{display:table-row;} 
    .table-display [class*="col"]{float:none; display:table-cell; vertical-align:middle; padding-left:15px; padding-right:15px;} 
}

你會表顯示類添加到您的形式： <form class="form-horizontal table-display" role="form">

HTH， -Ted

編輯補充：繼承人fiddle- http://jsfiddle.net/eAaa3/ 當然，你需要拉伸框架以拆除它

來源

2014-03-07 14:28:49 Ted

-1

這就是我對我的做法。我實際上使用Bootstrap今天

.control-label{ 
    float:left; 
    vertical-align:middle;   
}

來源

2014-03-07 14:38:02 LOTUSMS

-1 ??????大聲笑好，如果你這樣說。 – LOTUSMS

我有同樣的問題，我用一個表來代替。如果你使用表來實現它，你也可以使用.table和.table響應的bootstrap類。

來源

2015-07-12 11:03:37

如何垂直對齊長標籤，引導3

回答

相關問題