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

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

input内的form-group标记具有框架给出的特定高度。但是当您省略标记并仅填写文本时，它没有规定的padding，margin和/或height。因此，为了使其一致，您需要在div类中添加额外的col-*并为其提供padding-top

e.g。

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

Answer 2

您可以这样使用。不需要使用额外的div。

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

http://jsfiddle.net/x9et1m6n/