html - 如何以水平形式组合输入和跨度？

Question

我想以水平形式组合一些跨度和一些输入。

简单的输入代码:

<div class="form-group">
    <label class="col-sm-2 control-label">Bob: </label>
    <div class="col-sm-4">
        <input type='text' data-buttonText="bob" />
    </div>
</div> 

如果我这样做:

<div class="form-group">
    <label class="col-sm-2 control-label">Bob: </label>
    <div class="col-sm-4">
        <span>Some text</span>
    </div>
</div> 

我会得到这样的结果:

因此，标签文本和跨度文本不在一行中。我想把它们放在一条线上。 Span 的文本必须与标签的文本相反。我如何使用 bts 方法做到这一点？

Answer 1

form-group 中的 input 标签具有框架指定的特定高度。但是，当您省略标签并仅填写文本时，它就没有规定的 padding、margin 和/或 height。因此，为了使其对齐，您需要在 col-* 类中放置一个额外的 div 并为其提供 padding-top

例如

<div class="col-sm-10">
  <div style="padding-top: 6px;">Some text</div>
</div>