Question

我在输入表单中有两种情况，我无法垂直对齐文本和字段。我试过显示：内联，显示：内联块，显示：表格单元格，垂直对齐文本底部和底部，但没有很好的结果。首先，问题在于标签（两者都应该在底部对齐，一起是字段），在第二个问题是最后一个radiobox及其标签。您可以在下面查看问题。它应该与两个第二个radiobox和标签（顶部对齐）对齐。对齐应该以移动和桌面大小运行。

＆＃13;

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

＆＃13;

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

＆＃13;

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

在Bootstrap 3.0上使用垂直对齐的输入表单

1 个答案: