Bootstrap 3 образуют столбцы не разрушающиеся

Question

Я пытаюсь получить некоторые столбцы разрушаться:

<div class="container sign-up-form-container"> 
    <form> 
     <div class="row"> 
      <input type="text" name="suFullName" placeholder="Full Name" class="input-text col-xs-12" autofocus> 
      </div> 
      <div class="row"> 
       <input type="text" name="suEmail" placeholder="Email" class="input-text col-xs-6" id="sign-up-email"> 
       <input type="password" name="suPassword" placeholder="Password" class="input-text col-xs-6" id="sign-up-password"> 
      </div> 
      <div class="row"> 
       <input type="checkbox" name="suAgree" id="sign-up-agree"><label class="text-minor" for="sign-up-agree" id="sign-up-agree-description">I agree to the <a>Terms of Service</a> and <a>Privacy Policy</a>.</label> 
      </div> 
      <div class="row"> 
       <input type="submit" class="cta-sign-up" value="Sign Up For Free"> 
      </div> 
     </form> 
    </div> 

Однако

<input type="text" name="suEmail" placeholder="Email" class="input-text col-xs-6" id="sign-up-email"> 
<input type="password" name="suPassword" placeholder="Password" class="input-text col-xs-6" id="sign-up-password"> 

не разрушаются на изменение размера. Как я могу заставить их рухнуть?

Answer 1

Сначала BOOTSRAP требует, чтобы каждая строка должна быть в классе = "container" или class = "container-fluid". В вашем примере я вижу, что вы принимаете один контейнер для всех строк. У ваших флажков нет классов сетки, таких как col-xs - ** col-sm - ** (вы можете использовать пустые классы для размещения ваших флажков, например, вы берете три col-sm-4. В первом столбце вы помещаете элемент Следующие два вы оставите пустыми. В этом случае вы можете поместить свой элемент, где хотите). Добавить класс = "form-control" на каждом входе.