Как объединить входы и пролеты в форме-горизонтальной форме?

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

например.

<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/