twitter-bootstrap – 在BS 3中对齐标签和文本框

发布时间：2020-12-17 21:28:07 所属栏目：安全来源：网络整理

导读：我正在尝试对齐标签使用Bootstrap 3的文本框当“开始日期”被包装时,这不起作用.我也尝试过横向形式,但对我没有帮助. div class="row" div class="col-xs-3 input-group" label class="active"Start Date/label input type="text" class="form-control" /di

我正在尝试对齐标签&使用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>

有人可以帮我吗？
谢谢,
?凯拉斯

解决方法

这是横向形式的解决方案

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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!