标签和表单元素之间的空间[关闭]答案

【问题标题】：Space between label and form element [closed]标签和表单元素之间的空间[关闭]
【发布时间】：2019-01-08 11:29:47
【问题描述】：

我是 bootstrap 和 HTML 的新手，想知道如何在整个表单中在表单标签和文本字段之间提供相同的间距。我附上了代码 sn-p 以及输出表单。

[表单代码][1][表单输出][2]

【问题讨论】：

请阅读How to Ask 和minimal reproducible example - 与您的问题相关的代码直接属于您的问题以文本形式，而不是作为图像 i> 代码。 meta.stackoverflow.com/questions/251361/…
您可以使用<br> 或margin 获取空间
提供您的代码以便我们提供帮助。
我附上了代码sn-p
应将“表单控件”类添加到所有输入字段。标签和输入应分组到 DIV 中，并启用“form-group”类。应该有助于解决间距问题和换行问题。

【解决方案1】：

你做得很好。您只需对元素进行分组。这里我要写HTML代码。

<div class="col-lg-12 form-group">
  <div class="col-lg-3 text-right">
    <label class="">small</label>
  </div>
  <div class="col-lg-5">
    <input type="text" class="form-control">
  </div>
</div>
<div class="col-lg-12 form-group">
  <div class="col-lg-3 text-right">
    <label class="">long lebel text</label>
  </div>
  <div class="col-lg-5">
    <input type="text" class="form-control">
  </div>
</div>

您需要将标签框和文本框分开设置，并将标签推到最右边。 You can check here。希望它会帮助你。 :)

【讨论】：

【解决方案2】：

您可以为标签使用特定的列缩进：

<div class="form-group form-inline">                            
    <label class="col-md-2" for="exampleInputEmail1">Email address:</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">


 </div>
    <div class="form-group form-inline">                            
        <label class="col-md-2" for="idForTextfield">A very long text for this label:</label>
            <input type="text" class="form-control" id="idForTextfield" placeholder="your text">
    </div>

您还可以为您的文本字段添加一些列缩进，以便在有限的空间中限制它，只需在<input> 标记的类中添加col-md-2。在这里采样Code sample。

编码愉快:)

【讨论】：