Форма с надписями над входами, а также метка и входная строка с использованием Bootstrap?

Question

Я хотел бы иметь такую ​​форму, которая выглядит следующим образом:

Order Person  City   Street 
1234  Joe   Hull   Coronation 


Date   Phone 
1/1/2001  051-666-333 

стиль по умолчанию дает мне метку над входом, но затем он складывает все входы один друг на друга.

Есть ли способ, которым я мог бы достичь метки над входом, но также иметь все поля, следующие друг за другом в строке? Обратите внимание, что я хочу попытаться придерживаться как можно большего числа рамок Twitter, поэтому я думаю, что важно не добавлять слишком много дополнительных разметки или div.

Answer 1

Я не думаю, что это имеет какое-либо отношение к jQuery, например @ManseUK, это, вероятно, проблема css. Я не уверен, если вы окружающее это в элементе или нет, но вы должны быть в состоянии сделать это с помощью строки в начальной загрузке, а затем всплывают контрольные группы

http://jsfiddle.net/billpull/uWeW5/

добавить класс, как это к вашему CSS или независимо от того, что вы хотите назвать в зависимости от любых других возможных свойств.

.float-left { 
    float: left; 
} 

и измените свой html-код на что-то вроде этого.

  <div class="row"> 
      <div class="control-group float-left"> 
       <label class="control-label">Some label</label> 
       <div class="controls"> 
        <input type="text" /> 
       </div> 
      </div> 
      <div class="control-group float-left"> 
       <label class="control-label">Some label</label> 
       <div class="controls"> 
        <input type="text" /> 
       </div> 
      </div> 
      <div class="control-group float-left"> 
       <label class="control-label">Some label</label> 
       <div class="controls"> 
        <input type="text" /> 
       </div> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="control-group float-left"> 
       <label class="control-label">Some label</label> 
       <div class="controls"> 
        <input type="text" /> 
       </div> 
      </div> 
      <div class="control-group float-left"> 
       <label class="control-label">Some label</label> 
       <div class="controls"> 
        <input type="text" /> 
       </div> 
      </div> 
     </div> 

В зависимости от ваших ограничений по ширине вы можете использовать системную сетку бутстрапа, а не плавать.