Как получить входные данные в одной строке с помощью css?

Question

Привет У меня есть этот следующий код:

<div class="panel panel-primary fixed-panel"> 
    <div class="panel-heading">Test</div> 
    <div class="panel-body"> 
     <div class="col-xs-4"> 
      <form name="myForm"> 
       <label for="startInput">Start:</label><br /> 
       <input type="text" id="startInput" class="form-control" name="start"> 

       <label for="endInput">End:</label><br /> 
       <input type="text" id="endInput" class="form-control" name="end"> 
      </form> 
     </div> 
     </div> 
    </div> 

Как это возможно, что я получаю входы в одной и той же линии? Я хочу, чтобы метки все еще находились над входами.

Answer 1

Использование .form-рядный для формы, как указано в загрузчике documentation

Оклейка скрипку здесь fiddle

Это новый дом.

<div class="panel panel-primary fixed-panel"> 
    <div class="panel-heading">Test</div> 
    <div class="panel-body"> 

     <form name="myForm" class="form-inline"> 
      <div class="form-group"> 
       <label for="startInput">Start:</label> 
       <input type="text" id="startInput" class="form-control" name="start"> 
      </div> 
       <div class="form-group"> 

        <label for="endInput">End:</label> 
        <input type="text" id="endInput" class="form-control" name="end"> 
       </div> 
     </form> 
     </div> 
    </div> 

Answer 2

Я вижу, вы используете загрузчик, так что просто добавить класс form-inline в свой тег формы и обернуть этикетки и ввода тегов для div.form-group

Подробнее об этом здесь: http://getbootstrap.com/css/#forms-inline

Или так: http://jsfiddle.net/Stafox/5manb2at/