Bootstrap:标签内的输入 [英] Bootstrap: Input inside a label

查看：24
本文介绍了Bootstrap:标签内的输入的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

为了避免表单上的每个输入元素都必须有一个 ID，我想将表单输入放在 label(引导程序 3)中.

我的问题是这会导致行之间产生额外的垂直间距，输入未填充其父级的全宽，并且输入未对齐.

<div class="form-group"><label class="row"><span class="col-md-4 control-label">电子邮件:</span><div class="col-md-8"><input class="form-control" type="email" placeholder="Email"/>

<div class="form-group"><label class="row"><span class="col-md-4 control-label">密码:</span><div class="col-md-8"><input class="form-control" type="password" placeholder="密码"/>

</表单>

解决方案

解决方案是使用标签本身作为form-group，去掉row，并向 CSS 添加样式，为标签设置 display: block.我已经在此 HTML 中内联了样式以显示我的意思，显然您应该将其放入 CSS 中.

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

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

</表单>

In order to avoid having to have an ID for each input element on my form I would like to place my form input inside the label (Bootstrap 3).

My problem is that this is causing extra vertical spacing between rows, the input is not filling the full width of its parent, and the inputs are not aligned.

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

解决方案

The solution is to use the label itself as the form-group, remove the row, and to add a style to the CSS that sets display: block for labels. I have inlined the style in this HTML to show what I mean, obviously you should put it into a 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>

这篇关于Bootstrap:标签内的输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆