javascript - 表的 Bootstrap 模态对齐

Question

我有一个有 3 个选项卡的模态窗口。一个选项卡我试图将按钮和表格与其他控件对齐，但它不起作用。

HTML:

<tab  ng-controller="elasticController"  heading="Data Source">
     <div class="row">
                         <div class="col-lg-6 col-md-6">
                             <div class="form-group"  >
                                 <label class="control-label col-lg-6 col-md-6">Data source</label>
                                    <div class="col-lg-6 col-md-6">
                                         <select  class="form-control" name="fancySelect" > 
                                    <option value="1"   data-html-text="Elastic search"> Elastic search</option>             
                                 </select>
                                    </div>
                             </div>
                         </div>                         
                       </div>
                       <div class="row">
                             <div class="col-lg-6 col-md-6">
                                <div class="form-group"  >
                                <label class="control-label col-lg-6 col-md-6">Enter the URL:</label>
                                <div class="col-lg-6 col-md-6">
                                      <input  class="form-control" />
                                </div>
                                   </div>
                             </div>

                       </div>
                        <div  class="row">
                             <div class="col-lg-6 col-md-6">
                                <div class="form-group"  >
                                <label class="control-label col-lg-6 col-md-6">Select the index:</label>
                                <div class="col-lg-6 col-md-6">
                                       <!--  <select ng-model="ser.type" ng-options="t.id as t.title for t in chartTypes"></select> -->
                                 <select ng-model="selectedIndex"  ng-options="p.index for p in indexes | orderBy: 'index'"  ng-required>
                                 </select>
                                </div>
                             </div>
                         </div>

                       </div>
                       <div  class= "row">                          
                            <div  class="col-lg-6 col-md-6">
                                 <button   ng-click="searchQuery()"  class="btn btn-default" >Get data</button> 
                             </div>

                       </div>
                        <div class="row">
                             <div class="col-lg-6 col-md-6">
                                 <table class="table">
                                                    <thead>
                                                         <tr>
                                                             <th ng-repeat="(header, value) in resultData[0]">
                                                             {{header}}
                                                            </th>
                                                        </tr>
                                                     </thead>
                                             <tbody>
                                                <tr ng-repeat="row in resultData">
                                                    <td ng-repeat="cell in row">
                                                     {{cell}}
                                                    </td>
                                                </tr>
                                              </tbody>
                                      </table>
                                </div>
                            </div>              
                 </tab>

当前:

期望:

Answer 1

那是因为所有其他控件都有一个 Label 来填充左侧的空间。

改变

<div  class= "row">                          
    <div  class="col-lg-6 col-md-6">
        <button   ng-click="searchQuery()"  class="btn btn-default" >Get data</button> 
    </div>
</div>

到

<div  class= "row">                          
    <div  class="col-lg-6 col-md-6">
        <div class="col-lg-offset-6 col-md-offset-6 col-lg-6 col-md-6">
            <button ng-click="searchQuery()" class="btn btn-default" >Get data</button> 
        </div>
    </div>
</div>