Bootstrap 3.0上垂直对齐的输入表单答案

【问题标题】：input form with vertical align on Bootstrap 3.0Bootstrap 3.0上垂直对齐的输入表单
【发布时间】：2015-07-05 02:32:31
【问题描述】：

我有两种输入表单无法垂直对齐文本和字段的情况。我尝试了 display:inline、display:inline-block、display:table-cell 和vertical-align with text-bottom 和bottom，但效果不佳。第一个问题是标签（两者都应该在底部对齐，一起字段），第二个问题是最后一个单选框及其标签。您可以查看下面的问题。它应该与第二个单选框和标签对齐（顶部对齐）。对齐应该以移动和桌面尺寸运行。

.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>

【问题讨论】：

标签： html input twitter-bootstrap-3 label vertical-alignment

【解决方案1】：

您需要在表单类中添加“form-inline” 在手机屏幕尺寸上，它会垂直

<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>

【讨论】：