在Bootstrap面板标题中对齐元素

eento 发表于 Dev

eento

为了在面板标题中包含3个元素，我尝试了以下操作：

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

但这呈现：

标头元素未对齐

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

Somendra Joshi

您可以使用引导网格来解决此问题，可以使用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;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。