Встраивание вложенных входов формы с Bootstrap 3

Question

Я пытаюсь создать простую форму с помощью Bootstrap 3, где люди могут зарегистрироваться для небольшого события. В этой форме они также должны указывать, хотят ли они одну или несколько футболок и какой размер (и) они хотят заказать. Я не новичок в HTML, CSS и Javascript, но я новичок в Bootstrap. Кроме того, пока я программист днем, я в основном пишу REST-сервисы, поэтому мои дизайнерские навыки довольно ограничены. Использование w3schools и других сайтов учебник я прибыл на это:

<div class="form-group form-group-sm"> 
     <p class="help-block">Please select the number of T-shirts per size you would like to order.</p> 
     <label class="col-xs-1" for="shirt-s">S</label> 
     <div class="col-xs-1"> 
      <input class="form-control" type="text" id="shirt-s"> 
     </div> 
     <label class="col-xs-1" for="shirt-m">M</label> 
     <div class="col-xs-1"> 
      <input class="form-control" type="text" id="shirt-m"> 
     </div> 
     <label class="col-xs-1" for="shirt-l">L</label> 
     <div class="col-xs-1"> 
      <input class="form-control" type="text" id="shirt-l"> 
     </div> 
     <label class="col-xs-1" for="shirt-xl">XL</label> 
     <div class="col-xs-1"> 
      <input class="form-control" type="text" id="shirt-xl"> 
     </div> 
     <label class="col-xs-1" for="shirt-xxl">XXL</label> 
     <div class="col-xs-1"> 
      <input class="form-control" type="text" id="shirt-xxl"> 
     </div> 
     <div class="col-xs-2">&nbsp;</div> 
    </div> 
    <div class="form-group"> 
     <button type="submit" class="btn btn-default">Submit</button> 
    </div> 

См jsfiddle:

https://jsfiddle.net/tonvanbart/83nbny8h/5/

Не самая красивая в мире, но я могу жить с этим. Мой главный вопрос: почему кнопка «отправить» не находится в собственной строке, а встроена после полей ввода? Сначала мне показалось, что мне нужно добраться до 12 столбцов, и мне было всего 10. Но добавление двухколоночного div с неразрывным пространством не помогло, и добавление тега <br> тоже не имело эффекта.

Кроме того, хотя я могу жить с этим (это для неформальной небольшой группы людей, которые хорошо знают друг друга), если кто-нибудь может дать мне указатель на то, как приблизить индикаторы размера футболки к их соответствующему входу полей, это было бы здорово. Заранее спасибо.

Не стесняйтесь сообщать мне, если вам нужна дополнительная информация.

Answer 1

Вот фиксированный код:

https://jsfiddle.net/ccx9x7om/1/

Я добавил следующий CSS

.row .form-group label, .row .form-group input { 
    display: inline-block; 
} 

.row .form-group input { 
    width: 50%; 
} 

button { 
    margin: 25px; 
} 

Для того, чтобы использовать столбцы Bootstrap должным образом, вам нужно обернуть их в ряд, и обернуть все ряды внутри либо .container, либо .container-fluid. Я переместил ярлыки в их соответствующие .col-xs-2, а затем завернул все в нужные выше divs.

Answer 2

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

Это просто соответствует расположению контейнера/строки/столбца, которое обычно следует за Bootstrap. См. Nesting Columns.

* Примечание: класс form-group не нужен, он просто добавляет прокладки вокруг ваших входов.

См. Рабочий фрагмент на FullPage.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <form> 
 
    <h2>Order a Shirt</h2> 
 
    <div class="row"> 
 
     <div class="col-sm-6"> 
 

 
     <div class="form-group"> 
 
      <label for="name">Name</label> 
 
      <input type="password" class="form-control" id="name" placeholder="Your Name"> 
 
     </div> 
 

 
     <div class="form-group"> 
 
      <label for="email">Email address</label> 
 
      <input type="email" class="form-control" id="email" placeholder="Email address (never shown)"> 
 
     </div> 
 

 
     </div> 
 

 
     <div class="col-sm-6"> 
 
     <div class="row"> 
 

 
      <div class="col-xs-4 col-sm-4"> 
 
      <div class="form-group"> 
 
       <label for="shirt-s">S</label> 
 
       <input class="form-control" type="text" id="shirt-s"> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-xs-4 col-sm-4"> 
 
      <div class="form-group"> 
 
       <label for="shirt-m">M</label> 
 
       <input class="form-control" type="text" id="shirt-m"> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-xs-4 col-sm-4"> 
 
      <div class="form-group"> 
 
       <label for="shirt-l">L</label> 
 
       <input class="form-control" type="text" id="shirt-l"> 
 
      </div> 
 
      </div> 
 
     </div> 
 

 
     <div class="row"> 
 
      <div class="col-xs-4 col-sm-4"> 
 
      <div class="form-group"> 
 
       <label for="shirt-xl">XL</label> 
 
       <input class="form-control" type="text" id="shirt-xl"> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-xs-4 col-sm-4"> 
 
      <div class="form-group"> 
 
       <label for="shirt-xxl">XXL</label> 
 
       <input class="form-control" type="text" id="shirt-xxl"> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-xs-4 col-sm-4"> 
 
      <div class="form-group"> 
 
       <label>Order Now</label> 
 
       <button type="submit" class="btn btn-success btn-block btn-submit">Submit</button> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-xs-12"> 
 
      <p class="help-block">Please select the number of T-shirts per size you would like to order.</p> 
 
      </div> 
 

 
     </div> 
 
     </div> 
 
    </div> 
 

 
    </form> 
 
</div>