对齐 Bootstrap 面板 header 中的元素

Question

为了将 3 个元素放入一个面板 header 我尝试了这个：

 <div class="panel panel-primary">
            <!-- Default panel header contents -->
            <div class="panel-heading">
                <h4 class="panel-title">
                    <div class="pull-left">
                        <h4 class="panel-title"> <i class="glyphicon glyphicon-user"></i>
                            Users
                        </h4>
                    </div>
                    <div class="header-center">
                        <pagination class="panel-title" ng-show="totalItems > pageParameters.size" items-per-page="pageParameters.size" boundary-links="true" total-items="totalItems" ng-model="currentPage" ng-change="changePage()"
                                    previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></pagination>
                    </div>
                    <div class="pull-right">
                       <span class="panel-title btn-group">
                            <button ng-disabled="underCreation" type="button" class="btn btn-default btn-sm" ng-click="addUser()">
                                <span class="glyphicon glyphicon-plus text-primary"></span>
                                <span class="text-primary"><strong>Add</strong></span>
                            </button>
                        </span>
                    </div>
                </h4>
                <div class="clearfix"></div>
            </div>
</div>

与.less文件对应：

.header-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }

但这呈现：

我需要添加按钮与其他元素对齐..

Answer 1

你可以使用bootstrap网格来解决这个问题您可以使用 col-xs-3,col-xs-6,col-xs-3 创建 3 个平行列检查代码以获得更多说明 http://jsfiddle.net/5doxw0ea/

HTML:

<div class="container">

    <div class="panel panel-primary">
        <div class="panel-heading">
            <div class="container-fluid panel-container">
                <div class="col-xs-3 text-left">
                    <h4 class="panel-title abc">
                        <i class="glyphicon glyphicon-user"></i>
                        Users
                    </h4>
                </div>
                <div class="col-xs-6 text-center ">
                    <ul class="pagination panel-pagination">
                        <li>
                          <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                          </a>
                        </li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li>
                          <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                          </a>
                        </li>
                      </ul>
                </div>
                <div class="col-xs-3 text-right">
                    <span class="panel-title btn-group">
                        <button ng-disabled="underCreation" type="button" class="btn btn-default btn-sm abc" ng-click="addUser()">
                            <span class="glyphicon glyphicon-plus text-primary"></span>
                            <span class="text-primary"><strong>Add</strong></span>
                        </button>
                    </span>
                </div>          
            </div>          
        </div>
    </div>
</div>

CSS:

.panel-pagination {
    margin: 0 0 !important;
}
.panel-container {
    padding-right: 0 !important;
    padding-left: 0 !important;
    height:35px;
}
.abc{
    height:35px;
      display:table-cell !important;
      vertical-align:middle;
}

Answer 2

如果不需要完整的网格，您也可以将第三个 div pull-right 移到第二个 div header-center 上方。

对齐 Bootstrap 面板 header 中的元素

Align elements in Bootstrap panel header

html

css

twitter-bootstrap

twitter-bootstrap-3