在引導中垂直對齊控件

我是bootstrap和css3的新手。我想讓我的控件在中間垂直對齊，但有些無法使用引導類找到優雅的解決方案。請檢查下面的示例代碼段：在引導中垂直對齊控件

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="row"> 
 
    <div class="col-md-12"> 
 
    <div class="form-group col-md-5"> 
 
     <span class="fieldtext">Field 1</span> 
 
    </div> 
 
    <div class="form-group col-md-7"> 
 
     <input class="form-control input-sm"></input> 
 
    </div> 
 
    </div> 
 
</div>

來源

2015-06-17 user2185592

因爲我明白，你想創建字段旁邊，而不是在它上面的標籤形式（如默認的窗體行爲Bootstrap）你應該使用form-inline和form-group類。這樣Bootstrap會將字段與標籤對齊。

見這個例子：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<form class="form-inline"> 
 
    <div class="form-group"> 
 
    <label for="exampleInput">Field 1</label> 
 
    <input type="text" class="form-control" id="exampleInput"> 
 
    </div> 
 
</form>

來源

2015-06-17 10:08:02 Christina

我運行上面的代碼片段，它仍然在輸入字段上顯示標籤。我想要標籤和輸入內聯和垂直對齊。 – user2185592

@ user2185592標籤顯示在輸入字段的頂部，因爲您正在非常小的視口中查看窗體（與您的示例一樣）。如果您點擊「完整頁面」按鈕在較大的視口中查看該視圖，則會看到另一個旁邊的視圖。或者，如果您需要爲較小的視口相互顯示它們，則可以將相關規則自己添加到'.form-control'元素中：'display：inline-block;寬度：自動; vertical-align：middle;' – Christina

我沒有意識到這是一個視口問題。後來，我搜索引導文件，發現這個[鏈接]（http://www.w3schools.com/bootstrap/bootstrap_forms.asp），它是完美的。你的答案也匹配它，因此將其標記爲答案 – user2185592

<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
<span class="sr-only">Next</span>

<a class="left carousel-control" href="#myCarousel" role="button" data-slide="next"> 
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
<span class="sr-only">previous</span>

只需添加類權（引導-CLA ss）在下一個按鈕的轉盤控件中，以及在引導程序中的前一個按鈕的轉盤控件中的左側類（Bootstrap-class）。

來源

2015-06-17 11:24:57

在引導中垂直對齊控件

回答

相關問題