Bootstrap並排對齊兩列

如何將輸入字段與屏幕截圖中所示的左側對齊？Bootstrap並排對齊兩列

這裏是我的代碼，我都試過，但沒有運氣...

<div class="col-md-6"> 
    <div class="form-group"> 
     <label for="inputEmail3" class="col-sm-2 control-label">Name</label> 
     <div class="col-sm-10"> 
      <input type="text" class="form-control" id="Name" placeholder="Name"> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label for="inputPassword3" class="col-sm-2 control-label">Address</label> 
     <div class="col-sm-10"> 
      <input type="text" class="form-control" id="Address" placeholder="Address"> 
     </div> 
    </div> 
</div> 
<div class="col-md-6"> 
    <div class="form-group"> 
     <label for="inputEmail3" class="col-sm-2 control-label">City</label> 
     <div class="col-sm-10"> 
      <input type="text" class="form-control" id="City" placeholder="City"> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label for="inputPassword3" class="col-sm-2 control-label">Country</label> 
     <div class="col-sm-10"> 
      <input type="text" class="form-control" id="Country" placeholder="Country"> 
     </div> 
    </div> 
</div> 

<div class="col-md-6"> 
    <div class="form-group"> 
     <label for="inputEmail3" class="col-sm-2 control-label">A 1</label> 
     <div class="col-sm-10"> 
      <input type="text" class="form-control" id="City" placeholder="City"> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label for="inputEmail3" class="col-sm-2 control-label">B 1</label> 
     <div class="col-sm-10"> 
      <input type="text" class="form-control" id="City" placeholder="City"> 
     </div> 
    </div> 

</div> 

<div class="col-md-6"> 

    <div class="form-group"> 
     <label for="inputPassword3" class="col-sm-2 control-label">B 2</label> 
     <div class="col-sm-10"> 
      <input type="text" class="form-control" id="Country" placeholder="Country"> 
     </div> 
    </div> 
</div> 

     <div class="col-md-12"> 

    <div class="form-group"> 
     <label for="inputPassword3" class="col-sm-2 control-label">C 3</label> 
     <div class="col-sm-6"> 
      <input type="text" class="form-control" id="Country" placeholder="Country"> 
     </div> 
    </div> 
</div>

來源

2015-11-04 Nick Kahn

我的工作，並想出如何給你的佈局，你錯過了一個容器和一些CSS。

HTML：

<div class="container"> 
    <div class="col-md-6"> 
     <div class="form-group"> 
      <label for="inputEmail3" class="col-sm-2 control-label">Name</label> 
      <div class="col-sm-10"> 
       <input type="text" class="form-control" id="Name" placeholder="Name"> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label for="inputPassword3" class="col-sm-2 control-label">Address</label> 
      <div class="col-sm-10"> 
       <input type="text" class="form-control" id="Address" placeholder="Address"> 
      </div> 
     </div> 
    </div> 
    <div class="col-md-6"> 
     <div class="form-group"> 
      <label for="inputEmail3" class="col-sm-2 control-label">City</label> 
      <div class="col-sm-10"> 
       <input type="text" class="form-control" id="City" placeholder="City"> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label for="inputPassword3" class="col-sm-2 control-label">Country</label> 
      <div class="col-sm-10"> 
       <input type="text" class="form-control" id="Country" placeholder="Country"> 
      </div> 
     </div> 
    </div> 

    <div class="col-md-6"> 
     <div class="form-group"> 
      <label for="inputEmail3" class="col-sm-2 control-label">A 1</label> 
      <div class="col-sm-10"> 
       <input type="text" class="form-control" id="City" placeholder="City"> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label for="inputEmail3" class="col-sm-2 control-label">B 1</label> 
      <div class="col-sm-10"> 
       <input type="text" class="form-control" id="City" placeholder="City"> 
      </div> 
     </div> 

    </div> 

    <div class="col-md-6"> 

     <div class="form-group"> 
      <label for="inputPassword3" class="col-sm-2 control-label">B 2</label> 
      <div class="col-sm-10"> 
       <input type="text" class="form-control" id="Country" placeholder="Country"> 
      </div> 
     </div> 
    </div> 
    <div style='clear:both'></div> 
     <div class="col-md-6"> 

     <div class="form-group"> 
      <label for="inputPassword3" class="col-sm-2 control-label">C 3</label> 
      <div class="col-sm-10"> 
       <input type="text" class="form-control" id="Country" placeholder="Country"> 
      </div> 
     </div> 
    </div> 
</div>

CSS：

.container{ 
    margin-top: 20px; 
} 

input{ 
    margin: 5px; 
}

工作實例：CODEPEN DEMO

來源

2015-11-04 04:03:23

這裏就是我向

<div class="col-md-6"> 
    <div class="form-group"> 
     <label for="inputEmail3" class="col-sm-2 control-label">Name</label> 
     <div class="col-sm-10"> 
      <input type="text" class="form-control" id="Name" placeholder="Name"> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label for="inputPassword3" class="col-sm-2 control-label">Address</label> 
     <div class="col-sm-10"> 
      <input type="text" class="form-control" id="Address" placeholder="Address"> 
     </div> 
    </div> 
</div> 
<div class="col-md-6"> 
    <div class="form-group"> 
     <label for="inputEmail3" class="col-sm-2 control-label">City</label> 
     <div class="col-sm-10"> 
      <input type="text" class="form-control" id="City" placeholder="City"> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label for="inputPassword3" class="col-sm-2 control-label">Country</label> 
     <div class="col-sm-10"> 
      <input type="text" class="form-control" id="Country" placeholder="Country"> 
     </div> 
    </div> 
</div> 

<div class="col-md-6"> 
    <div class="form-group"> 
     <label for="inputEmail3" class="col-sm-2 control-label">A 1</label> 
     <div class="col-sm-10"> 
      <input type="text" class="form-control" id="City" placeholder="City"> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label for="inputEmail3" class="col-sm-2 control-label">B 1</label> 
     <div class="col-sm-10"> 
      <input type="text" class="form-control" id="City" placeholder="City"> 
     </div> 
    </div> 

</div> 

<div class="col-md-6"> 

    <div class="form-group"> 
     <label for="inputPassword3" class="col-sm-2 control-label">B 2</label> 
     <div class="col-sm-10"> 
      <input type="text" class="form-control" id="Country" placeholder="Country"> 
     </div> 
    </div> 
</div> 
<div style='clear:both'></div> 
     <div class="col-md-6"> 

    <div class="form-group"> 
     <label for="inputPassword3" class="col-sm-2 control-label">C 3</label> 
     <div class="col-sm-10"> 
      <input type="text" class="form-control" id="Country" placeholder="Country"> 
     </div> 
    </div> 
</div> 
<div class="col-md-6"> 

</div>

來源

2015-11-04 03:20:43

Bootstrap並排對齊兩列

回答

相關問題