twitter-bootstrap – Bootstrap：在标签内输入

发布时间：2020-12-17 20:38:15 所属栏目：安全来源：网络整理

导读：为了避免必须为我的表单上的每个输入元素都有一个ID,我想将表单输入放在标签(Bootstrap 3)中. 我的问题是,这导致行之间的额外垂直间距,输入未填充其父级的整个宽度,并且输入未对齐. form class="form-horizontal" div class="form-group" label class="row"

为了避免必须为我的表单上的每个输入元素都有一个ID,我想将表单输入放在标签(Bootstrap 3)中.

我的问题是,这导致行之间的额外垂直间距,输入未填充其父级的整个宽度,并且输入未对齐.

<form class="form-horizontal">
    <div class="form-group">
        <label class="row">
          <span class="col-md-4 control-label">Email:</span>
          <div class="col-md-8">
            <input class="form-control" type="email" placeholder="Email"/>
          </div>
        </label>
    </div>
    <div class="form-group">
        <label class="row">
          <span class="col-md-4 control-label">Password:</span>
          <div class="col-md-8">
            <input class="form-control" type="password" placeholder="Password"/>
          </div>
        </label>
    </div>
</form>

解决方法

解决方案是使用标签本身作为表单组,删除行,并向CSS添加样式以设置display：block for labels.我已经在这个HTML中描述了这个样式以显示我的意思,显然你应该把它放到CSS中.

<form class="form-horizontal">
    <label class="form-group" style="display: block">
      <span class="control-label col-md-2">Email:</span>
      <div class="col-md-10">
        <input class="form-control" type="email" placeholder="Email"/>
      </div>
    </label>
    <label class="form-group" style="display: block">
      <span class="control-label col-md-2">Password:</span>
      <div class="col-md-10">
        <input class="form-control" type="email" placeholder="Email"/>
      </div>
    </label>
</form>

（编辑：李大同）

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