Fieldsets Использование Bootstrap Сетки

Question

Я следующую разметку с помощью начальной загрузки сетки:

<form id="store-form" class="user-form"> 

    <div class="row"> 

     <div class="col-sm-6"> 
      <fieldset id="store-form-store-fields"> 
       <label>Store Nickname</label> 
       <input id="store-nickname-field" type="text" name="nickname" required class="form-control"> 
      </fieldset> 
     </div> 

     <fieldset id="store-form-location-fields"> 
      <div class="col-sm-6"> 
       <label>Store Address</label> 
       <input id="store-street-field" type="text" name="street" required class="form-control"> 
      </div> 

      <div class="col-sm-6"> 
       <label>City</label> 
       <input id="store-city-field" type="text" name="city" required class="form-control"> 
      </div> 

      <div class="col-sm-3"> 
       <label>State</label> 
       <select id="store-state-field" name="state_id" required class="form-control"> 
        <option>- Select a State -</option> 
        <option value="MA">Massachusetts</option> 
        <option value="CA">California</option> 
       </select> 
      </div> 

      <div class="col-sm-3"> 
       <label>Zip Code</label> 
       <input id="store-zipcode-field" type="text" name="zipcode" required class="form-control"> 
      </div> 
     </fieldset> 

    </div> 

    <div class="submit-wrapper"> 
     <button id="store-form-submit" type="submit" class="btn btn-primary submit-button">Save</button> 
    </div> 

</form> 

Как вы можете видеть, я пытаюсь использовать fieldsets сгруппировать поля на две группы. Мне нужно сделать это, чтобы я мог создавать представление Backbone.js для каждой группы полей отдельно. Очевидно, что это разбивает сетку, так как у меня есть дочерний элемент .row, который не является столбцом div.

Есть ли какой-либо способ заставить поляки работать с формой, созданной с использованием сетки Bootstrap?

Редактировать для пояснения: Моя цель состоит в том, чтобы макет вел себя так же, как если бы поля были удалены из примера.

Answer 1

насчет упаковки второго <fieldset> в div.col-md-6 и положить все содержимое второго <fieldset> в div.row? Таким образом, вы не пропустите определение столбца css. Дайте мне знать, если это поможет.

UPDATE:

Я изменил код, чтобы использовать адаптивные сбросы и col-md-pull/col-sm-pull. Кажется, остается отзывчивым. Это может быть самым близким решением, поскольку вы не смогли бы правильно закрыть определение кол-ва <div> в этом полевом наборе, чтобы получить правильную очистку.

http://jsfiddle.net/s9baun7c/4/

<form id="store-form" class="user-form"> 
    <div class="row"> 
     <div class="col-sm-6"> 
      <fieldset id="store-form-store-fields"> 
       <label>Store Nickname</label> 
       <input id="store-nickname-field" type="text" name="nickname" required class="form-control" /> 
      </fieldset> 
     </div> 
     <fieldset id="store-form-location-fields"> 
      <div class="col-sm-12"> 
       <label>Store Address</label> 
       <input id="store-street-field" type="text" name="street" required class="form-control" /> 
      </div> 
      <div class="clearfix visible-md-block"></div> 
      <div class="clearfix visible-sm-block"></div> 
      <div class="row"> 
       <div class="col-md-12"> 
        <div class="col-sm-12 col-sm-pull-12 col-sm-pull-12"> 
         <label>City</label> 
         <input id="store-city-field" type="text" name="city" required class="form-control" /> 
        </div> 
        <div class="clearfix visible-md-block"></div> 
        <div class="clearfix visible-sm-block"></div> 
        <div class="col-sm-6 col-sm-pull-12 col-sm-pull-12"> 
         <label>State</label> 
         <select id="store-state-field" name="state_id" required class="form-control"> 
          <option>- Select a State -</option> 
          <option value="MA">Massachusetts</option> 
          <option value="CA">California</option> 
         </select> 
        </div> 
        <div class="col-sm-6 col-sm-pull-12 col-sm-pull-12"> 
         <label>Zip Code</label> 
         <input id="store-zipcode-field" type="text" name="zipcode" required class="form-control" /> 
        </div> 
       </div> 
      </div> 
     </fieldset> 
    </div> 
    <br> 
    <div class="submit-wrapper"> 
     <button id="store-form-submit" type="submit" class="btn btn-primary submit-button">Save</button> 
    </div> 
</form>