Question

我正在尝试对齐标签＆amp;使用Bootstrap 3的文本框

当“开始日期”被包装时，这不起作用。我也试过形式横向，但没有帮助我。

<div class="row">
    <div class="col-xs-3 input-group">
        <label class="active">Start Date</label>    
        <input type="text" class="form-control">
    </div>
    <div class="col-xs-3">
        End Date  
        <input type="text" class="form-control" placeholder=".col-xs-3">                         
    </div>
    <div class="col-xs-6">
        Project URL 
        <input type="text" class="form-control" placeholder=".col-xs-6">
    </div>  
</div>

有人能帮帮我吗？谢谢，凯拉斯

Answer 1

以下是横向格式的解决方案

Fiddle

<form role="form" class="form-horizontal row">
  <div class="col-xs-3">
      <div class="form-group">
        <label for="exampleInput1" class="col-sm-6 control-label">Start Date</label>
        <div class="col-sm-6">
            <input type="text" class="form-control" id="exampleInput1" placeholder="Start Date">
        </div>
      </div>
  </div>
  <div class="col-xs-3">      
      <div class="form-group">
        <label for="exampleInput2"  class="col-sm-6 control-label" >End Date</label>
        <div class="col-sm-6">
            <input type="text" class="form-control" id="exampleInput2" placeholder="End Date">
        </div>            
      </div>
  </div>
  <div class="col-xs-6">        
      <div class="form-group">
        <label for="exampleInput3"  class="col-sm-4 control-label">Project URL</label>
        <div class="col-sm-8">      
            <input type="text" class="form-control" id="exampleInput3" placeholder="Project URL">
        </div>        
      </div> 
  </div>          
</form>

Answer 2

use a form tag with class "form-horizontal" to wrap your content -> try it : 

<form class="form-horizontal" role="form">
  <div class="form-group">
   <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
  <div class="col-sm-10">
   <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
   </div>
  </div>

</form>

对齐BS 3中的标签和文本框

2 个答案: