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：

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSExceptionDomains</key>
  <dict>
      <key>yourservergoeshere.com</key>
      <dict>
        <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
        <true/>
    </dict>
  </dict>
</dict>

CSS：

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

工作示例：CODEPEN DEMO

Bootstrap并排排列两列

2 个答案: