Ящики ввода не разнесены при изменении размера окна просмотра (bootstrap)

Question

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

http://jsfiddle.net/5ghc1r18/6/

<div class="container"> 
    <div class="wrapper"> 
     <div class="row"> 
      <div style="overflow:auto;width:90%" class="col-lg-10"> 
       <form id="form" action="welcome.php" class="form-horizontal" method="POST"> 
         <h1 class="text-center"> 
          <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>Sign Up 
         </h1> 
        <div class="form-group"> 
         <div class="col-lg-6"> 
          <input id="firstname" type="text" placeholder="First Name" name="fname" class="form-control" pattern="[A-Z][a-zA-Z]*" required/> 
         </div> 
         <div class="col-lg-6"> 
          <input id="lastname" type="text" placeholder="Last Name" name="lname" class="form-control" required/> 
         </div> 
        </div> 
        <div class="form-group"> 
         <div class="col-lg-12"> 
          <input type="email" placeholder="Email Address" name="email" class="form-control" required/> 
         </div> 
        </div> 
        <div class="form-group"> 
         <div class="col-lg-12"> 
          <input type="text" placeholder="Mobile" name="mobile" class="form-control" required/> 
         </div> 
        </div> 
        <div class="form-group"> 
         <div class="col-lg-12"> 
          <label for="day">Date of Birth:</label> 
          <div id="date1" class="datefield"> 
           <input id="day" type="tel" onkeypress="return isNumberKey(event)" maxlength="2" placeholder="DD" />/ 
           <input id="month" type="tel" onkeypress="return isNumberKey(event)" maxlength="2" placeholder="MM" />/ 
           <input id="year" type="tel" onkeypress="return isNumberKey(event)" maxlength="4" placeholder="YYYY" /> 
          </div> 
         </div> 
        </div> 
        <div class="form-group"> 
         <div class="col-lg-12"> 
          <select name="gender" class="form-control" required> 
           <option value="">Select one</option> 
           <option value="Male">Male</option> 
           <option value="Female">Female</option> 
           <option value="Others">I'm not sure</option> 
          </select> 
         </div> 
        </div> 
        <div class="form group"> 
         <div style="width:100%"> 
          <button type="submit" class="btn btn-success btn-block"> <i class="fa fa-plus"></i> Sign up!</button> 
         </div> 
        </div> 
       </form> 
      </div> 
     </div> 
    </div> 
</div> 

Спасибо за помощь!

Answer 1

Проблема в вашем HTML здесь

<div class="form-group"> 
    <div class="col-lg-6"> 

положил <div class="form-group"> внутри <div class="col-lg-6"> в настоящее время вы делаете противоположное.

e.g;

<div class="col-lg-6"> 
    <div class="form-group"> 
     <input id="firstname" type="text" placeholder="First Name" name="fname" class="form-control" pattern="[A-Z][a-zA-Z]*" required/> 
    </div> 
</div> 

<div class="col-lg-6"> 
    <div class="form-group"> 
     <input id="lastname" type="text" placeholder="Last Name" name="lname" class="form-control" required/> 
    </div> 
</div> 

Answer 2

Вы можете дать запас для полей ввода:

input[type="text"] { margin: 10px auto; }