标签和表单元素之间的空间

问题描述 投票:-1回答:2

我是bootstrap和HTML的新手,想要知道如何在整个表单中在表单标签和文本字段之间给出相同的间距。我附加了代码片段和输出表单。

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

bootstrap-4 haml
2个回答
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。希望它会对你有所帮助。 :)


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

快乐编码:)

热门问题
推荐问题
最新问题