Bootstrap 3拉右对不起作用

Question

我使用Bootstrap 3创建多列窗体。

这是第一列。

<div class="container"> 
    <div class="row clearfix"> 
     <div class="col-md-12 column"> 
      <form class="form-inline" role="form"> 
       <div class="row"> 
        <div class="col-md-3"> 
         <div class="form-group"> 
          <label for="RecordID" class="col-md-4 nopadding">Record ID</label><div class="col-md-8 nopadding pull-right"><input class="form-control" id="RecordID" type="text"></div> 
         </div> 
         <div class="form-group"> 
          <label for="ID" class="col-md-5 nopadding">ID</label><div class="col-md-7 nopadding pull-right"><input class="form-control" id="ID" type="text"></div> 
         </div> 
         <div class="form-group nopadding"> 
          <label for="FamilyName" class="col-md-5 nopadding">Family Name</label><div class="col-md-7 nopadding"><input class="form-control" id="FamilyName" type="text" maxlength="30"></div> 
         </div> 
         <div class="form-group"> 
          <label for="GivenName" class="col-md-5 nopadding">Given Name</label><div class="col-md-7 nopadding"><input class="form-control" id="GivenName" type="text" maxlength="30"></div> 
         </div> 
         <div class="form-group"> 
          <label for="MiddleName" class="col-md-5 nopadding">Middle Name</label><div class="col-md-7 nopadding"><input class="form-control" id="MiddleName" type="text" maxlength="30"></div> 
         </div> 
        </div> 
        //other column 
       </div> 
      </form> 
     </div> 
    </div> 
</div> 

但是，我得到了第一列看起来像这样。

我想对齐文本字段，以正确的，所以我说的“右拉”级到封装ID的文本字段股利。但是，它不起作用。

这里是JSFiddle链接，你会在链接中找到nopadding类，它只是删除填充。 的jsfiddle的结果框默认情况下不足够大，则需要拉动的结果框中得到我：JSFiddle link

Answer 1

添加类=“形式的组COL-MD-12 nopadding”到div的结果这是目前<div class="form-group">

Answer 2

我建议这样的事情：

<div class="container nopadding"> 
<form class="form-horizontal" role="form"> 
    <div class="form-group"> 
     <label for="recordId" class="col-sm-2 control-label">Record Id</label> 
     <div class="col-sm-5"> 
      <input type="text" class="form-control" id="recordId" placeholder="Record Id"> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label for="id" class="col-sm-2 control-label">Id</label> 
     <div class="col-sm-5"> 
      <input type="text" class="form-control" id="id" placeholder="Password"> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label for="familyName" class="col-sm-2 control-label">Family Name</label> 
     <div class="col-sm-5"> 
      <input type="text" class="form-control" id="familyName" placeholder="Family Name" maxlength="30"> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label for="givenName" class="col-sm-2 control-label">Given Name</label> 
     <div class="col-sm-5"> 
      <input type="text" class="form-control" id="givenName" placeholder="Given Name" maxlength="30"> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label for="middleName" class="col-sm-2 control-label">Middle Name</label> 
     <div class="col-sm-5"> 
      <input type="text" class="form-control" id="middleName" placeholder="Middle Name" maxlength="30"> 
     </div> 
    </div> 
</form> 

http://jsfiddle.net/y838v/3/

基于http://getbootstrap.com/css/#forms-horizontal