html – 对齐Bootstrap面板标题中的元素

概述为了将3个元素放入面板标题,我尝试了这个： <div class="panel panel-primary"> <!-- Default panel header contents --> <div class="panel-heading"> <h4 class="panel-title"> 为了将3个元素放入面板标题,我尝试了这个：

<div >            <!-- Default panel header contents -->            <div >                <h4 >                    <div >                        <h4 > <i ></i>                            Users                        </h4>                    </div>                    <div >                        <pagination  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 >                       <span >                            <button ng-Disabled="underCreation" type="button"  ng-click="addUser()">                                <span ></span>                                <span ><strong>Add</strong></span>                            </button>                        </span>                    </div>                </h4>                <div ></div>            </div></div>

和.less文件对应：

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

但这会呈现：

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

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

HTML：

<div >    <div >        <div >            <div >                <div >                    <h4 >                        <i ></i>                        Users                    </h4>                </div>                <div >                    <ul >                        <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 >                    <span >                        <button ng-Disabled="underCreation" type="button"  ng-click="addUser()">                            <span ></span>                            <span ><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;}

@H_301_48@ 总结

以上是内存溢出为你收集整理的html – 对齐Bootstrap面板标题中的元素全部内容，希望文章能够帮你解决html – 对齐Bootstrap面板标题中的元素所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。