Как получить регистрационную форму с двумя столбцами в бутстрапе 3?

Question

Я пытаюсь иметь регистрационную форму с двумя столбцами, используя bootstrap 3, другие страницы моего сайта хороши, кроме страницы регистрации. Мои поля ввода и метки разбросаны по всему экрану с правой стороны, потому что я использую col-md-6, чтобы разделить страницу на две. Теперь эта страница выглядит так.

Как вы можете видеть, правая часть ИДК, они разбросаны. Как исправить эту сторону? Мой код выглядит примерно так с обеих сторон:

<div class="container"> 
    <div class="row"> 
     <!-- start code on the left side of the page --> 
     <div class="col-md-6"> 
      <div class="form-group"> 
       <label class="col-sm-3 control-label"><font color="red"><b>*</b></font> First Name</label> 
        <div class="col-sm-6"> 
         <input type="text" class="form-control" name="firstname" id="firstname" 
         placeholder="Firstname" onKeyPress="return ValidateAlpha(event);" onblur="toUpper(this.value, this.id);"/>   
        </div> 
      </div> 
     </div> 
     <!-- left code ends here --> 

     <!-- start code on the right side of the page --> 
     <div class="col-md-6"> 
      <div class="form-group"> 
       <label class="col-sm-3 control-label"><font color="red"><b>*</b></font> E-mail</label> 
        <div class="col-sm-5 "> 
         <input type="text" class="form-control" name="email" id="email" placeholder= "email" 
          ondrop="return false;" onpaste="return false;" /></span> 
        </div> 
      </div> 
     </div> 
     <!-- right code ends here --> 
    </div> 
</div> 

Answer 1

Посмотрите на codepen я сделал для вас http://codepen.io/creativemind1/pen/QNYqqN

Пожалуйста, удалите !important с помощью CSS и внести изменения в вашем style.css

EDIT: Вы не должны давать какие-либо классы в ярлыке и <div class="col-md-6"> перед вводом, поскольку он автоматически выравнивается для вас.

Answer 2

Попробуйте clearfix класс в бутстрапе.

Codepen пример http://codepen.io/smallyin/pen/vGbegv