Bootstrap 並排對齊兩列

Question

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

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

<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>

Answer 1

這就是我想要的

<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>

Answer 2

我研究它並想出了如何為您提供該布局，但您缺少一個容器和一些 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 演示