Как выровнять три кнопки так, чтобы они складывались горизонтально в Bootstrap

Question

Я хочу выровнять три кнопки на верхней части сетки div 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>