輸入窗體與引導3.0上的垂直對齊

Question

我有兩種情況下輸入窗體，我不能垂直文本和字段對齊。我嘗試顯示：內聯，顯示：內聯塊，顯示：表格單元格，垂直對齊文本底部和底部，但沒有好的結果。首先，問題在於標籤（兩者應該在底部對齊，一起放在字段中），第二個問題是最後一個無線電盒及其標籤。您可以在下面查看問題。它應該與兩個第二個無線電盒和標籤（頂部對齊）對齊。對齊應該以移動和桌面尺寸運行。

.height-form-home{ 
 
display: table-cell; 
 
vertical-align: text-bottom; 
 

 
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
<form class="form" role="form"> 
 
<div class="row"> 
 
    <div class="col-xs-5 vbottom" > 
 
     <label class="height-form-home" for="email"> Wordwo do Wordwoe</label><br/> 
 
     <input type="email" class="form-control" id="email" placeholder="text"> 
 
    </div> 
 
    <div class="col-xs-7 vbottom" > 
 
     <label for="pwd" class="height-form-home" >Word/Word Wordwordword 
 
     ou wordwordwordw wordw</label> 
 
     <input type="password" class="form-control" id="pwd" placeholder="text"> 
 
    </div></div> 
 
    <br/> 
 
    <button type="submit" class="btn btn-default">Submit</button> 
 
     
 
    </form> 
 
    <br/><br/> 
 
    <form role="form"> 
 
    <label class="radio-inline"> 
 
     <input type="radio" name="optradio">Wordword<br/>Wordwor 
 
    </label> 
 
    <label class="radio-inline"> 
 
     <input type="radio" name="optradio">Wordwordwo<br/>Wordword 
 
    </label> 
 
    <label class="radio-inline"> 
 
     <input type="radio" name="optradio">Word<br/> 
 
    </label> 
 
    </form> 
 

Answer 1

你需要在你的窗體類 '的形式列直插式' 在手機屏幕尺寸增加，它會垂直

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
<form class="form-inline" role="form"> 
 
<div class="row"> 
 
    <div class="col-sm-6" > 
 
     <label for="email"> Wordwo do Wordwoe</label> 
 
     <input type="email" class="form-control" id="email" placeholder="text"> 
 
    </div> 
 
    <div class="col-sm-6" > 
 
     <label for="pwd" >Word/Word Wordwordword 
 
     </label> 
 
     <input type="password" class="form-control" id="pwd" placeholder="text"> 
 
    </div></div> 
 
    <br/> 
 
    <button type="submit" class="btn btn-default">Submit</button> 
 
     
 
    </form> 
 
    <br/><br/> 
 
    <form class="form-inline" role="form"> 
 
    <label class="radio-inline"> 
 
     <input type="radio" name="optradio">Wordword<br/>Wordwor 
 
    </label> 
 
    <label class="radio-inline"> 
 
     <input type="radio" name="optradio">Wordwordwo<br/>Wordword 
 
    </label> 
 
    <label class="radio-inline"> 
 
     <input type="radio" name="optradio">Word<br/> 
 
    </label> 
 
    </form>

一個乾淨的例子是

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 

 
    <form class="form-inline" role="form"> 
 
    <div class="form-group col-sm-6"> 
 
     <label for="email">Email:</label> 
 
     <input type="email" class="form-control" id="email" placeholder="Enter email"> 
 
    </div> 
 
    <div class="form-group col-sm-6"> 
 
     <label for="pwd">Password:</label> 
 
     <input type="password" class="form-control" id="pwd" placeholder="Enter password"> 
 
    </div> 
 
    <div class="checkbox"> 
 
     <label><input type="checkbox"> Remember me</label> 
 
    </div> 
 
    
 
    </form> 
 
</div>