Выравнивание входов при загрузке с использованием системы флюидной сетки

Question

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

<form action="/subscriptions" method="post"> 
    <fieldset> 
    <div class="control-group"> 
     <label class="control-label" for="name">Name</label> 
     <div class="controls row-fluid"> 
      <input class="span2" id="first_name" name="first_name" placeholder="First" required="required" type="text"> 
      <input class="span2" id="last_name" name="last_name" placeholder="Last" required="required" type="text"> 
     </div> 
    </div> 
    <div class="control-group"> 
     <label class="control-label" for="email">Email</label> 
     <div class="controls row-fluid"> 
     <input class="span4" id="email" name="email" type="email"> 
    </div> 
    </div> 
</fieldset> 
</form>​ 

http://jsfiddle.net/sguha095/v4amX/

Answer 1

взглянуть на эту jdfiddle: http://jsfiddle.net/kY5LL/18/

я добавил некоторые div.row-fluid контейнеров в строке вашей формы и один дополнительный набор входов для демонстрации.

Надеюсь, это то, что вы искали.

Answer 2

Сначала нужно очистить HTML, немного, есть дополнительное закрытие DIV на первой линии.

Я просто добавил несколько классов, чтобы улучшить стиль, чтобы вы могли видеть, как это работает. Класс input-block-level является бутстрап-микшированием, чтобы заставить входы действовать как истинные элементы уровня блока. Это необходимо, если вы хотите, чтобы это было чистым и чтобы использовать преимущества CSS. Если вы хотите сделать все свое стилирование с помощью HTML, вы можете сделать это с помощью большей разметки и менее семантических методов, но я бы рекомендовал против нее.

Надеюсь, это поможет!

http://jsfiddle.net/kY5LL/12/