Question

我想在div UI Grid的顶部对齐三个按钮，以便它们在水平方向上相等的空格对齐。

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

你的三个按钮都有不同的浮动。你可以给它们所有相同的造型。您还可以将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

我经常使用它，它应该适用于bootstrap部分。不确定角度部分。这是从我自己的代码中剪掉的一个小代码。我认为你可以根据自己的需要进行调整。

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

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

2 个答案: