我是Bootstrap和HTML的新手,想知道如何在整个表单中给表单标签和文本字段之间相同的间距。我已经附上了代码片段以及输出表单。
[表单代码] [1] [表单输出] [2]
答案 0 :(得分:0)
你做得很好。您只需要对元素进行分组。在这里,我要编写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。希望对您有帮助。 :)
答案 1 :(得分:0)
您可以为标签使用特定的列缩进:
<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>
您还可以为文本字段添加一些列缩进,以便仅在col-md-2
标签的类中添加<input>
即可限制其有限的空间。
在此处Code sample采样。
快乐编码:)