我应该如何对齐三个按钮，以便它们在引导程序中水平堆叠

Question

我想要对齐UI UI网格顶部的三个按钮，以便它们水平分隔相等的空间。

我是Bootstrap的新手。所以请解释一下正在做什么。这是我能想出的。

但他们跨越整个屏幕，也是前两个彼此相邻，另一个拉到最右端。

<div class="home-grid-content" ng-controller="TransactionDetailsUnmergeController"> 
    <div ng-style="pleaseWait"> 
     <div class="refresh" style="width:100%;height:100px;"> 
      <h4>Please wait....</h4> 
     </div> 
    </div> 
    <div ng-style="toggleDetails"> 
     <div class="row"> 
      <div class="col-lg-12"> 
       <div style="padding-top:10px; float: left;"> 
        <input type="submit" value="Search" class="btn btn-default" style="width:100px;" id="btnSearch" name="btnSearch" ng-click="caseSearch()" /> 
       </div> 
       <div style="padding-top:10px; float: right;"> 
        <button type="button" class="btn btn-default" ng-model="SearchRows" ng-click="AddNewSearchRow(SearchRows)">Add New Row</button> 
       </div> 
       <div style="padding-top:10px;" class="center-block"> 
        <button type="button" class="btn btn-default" ng-model="SearchRows" ng-click="AddNewSearchRow(SearchRows)">Approve/Reject</button> 
       </div> 
      </div> 
     </div> 
     <br/> 

     <div> 
      <h3>Unmerge Request Log</h3> 
      <div ui-grid="gridOptions_RQ" ui-grid-selection class="" ui-grid-pagination ui-grid-auto-resize> 
       <div class="watermark" ng-show="!gridOptions_RQ.data.length">No data available</div> 
      </div> 

      <div class="grid-pager"> 
       <uib-pagination boundary-links="true" total-items="totalItems" items-per-page="4" ng-change="pageChanged(currentPage)" ng-show="(totalItems>4) == true" 
           ng-model="currentPage" class="pagination" direction-links="false" id="HconstUnmerge_1" 
           first-text="&laquo;" last-text="&raquo;"> 
       </uib-pagination> 
      </div> 
     </div> 
     <br/> 

     <div> 
      <h3>Unmerge Process Log</h3> 
      <div ui-grid="gridOptions_PR" ui-grid-selection class="" ui-grid-pagination ui-grid-auto-resize> 
       <div class="watermark" ng-show="!gridOptions_PR.data.length">No data available</div> 
      </div> 

      <div class="grid-pager"> 
       <uib-pagination boundary-links="true" total-items="totalItems" items-per-page="4" ng-change="pageChanged(currentPage)" ng-show="(totalItems>4) == true" 
           ng-model="currentPage" class="pagination" direction-links="false" id="HconstUnmerge_1" 
           first-text="&laquo;" last-text="&raquo;"> 
       </uib-pagination> 
      </div> 
      <br/> 

      <div style="margin-top:8px;"> 
       <button type="button" class="btn btn-default pull-left" ng-click="backToDetailsPage()">Cancel</button> 
      </div> 
     </div> 
    </div> 

</div> 

我想从最左边的这三个按钮对齐彼此相等的空间。

现在它看起来像

Answer 1

你的三个按键都有着不同的floats.You可以给他们所有相同的造型。您还可以将padding-right: 10px;添加到样式中以在按钮之间添加空格。

<div class="col-lg-12"> 
      <div style="padding-top:10px; padding-right:10px; float: left;"> 
       <input type="submit" value="Search" class="btn btn-default" style="width:100px;" id="btnSearch" name="btnSearch" ng-click="caseSearch()" /> 
      </div> 
      <div style="padding-top:10px; padding-right:10px; float: left;"> 
       <button type="button" class="btn btn-default" ng-model="SearchRows" ng-click="AddNewSearchRow(SearchRows)">Add New Row</button> 
      </div> 
      <div style="padding-top:10px; padding-right:10px; float: left;" class="center-block"> 
       <button type="button" class="btn btn-default" ng-model="SearchRows" ng-click="AddNewSearchRow(SearchRows)">Approve/Reject</button> 
      </div> 
     </div> 

Answer 2

我通常使用它，它应该用于引导部分。不确定角部分。这是一个从我自己的代码中剪下来的小代码。我认为你可以适应你的需求。

<div class="form-group col-md-2"> 
    <input type='button' class='form-control btn btn-success btn-sm input-sm'></input>    
</div> 
<div class="form-group col-md-2"> 
    <input type='button' class='form-control btn btn-success btn-sm input-sm'></input> 
</div> 
<div class="form-group col-md-2"> 
    <input type='button' class='form-control btn btn-success btn-sm input-sm'></input> 
</div>