Bootstrap 将标签与分页对齐
Bootstrap Align Label to Pagination
我有一个分页元素可以移动到上一页/下一页。我想在它之前显示一个标签以显示当前和总项目数。例如:
1 - 30 共 2,950 [ < Prev ]
[ Next > ]
我不确定如何正确对齐。我在同一行中还有其他按钮/标签,并且希望所有内容都居中对齐。这是我得到的屏幕截图。
还有,我希望它如何显示。
一个 plunkr 代码演示了这个问题:
http://plnkr.co/edit/SaYpq1ov4MPBCGcAUQVt?p=preview
这是我正在使用的 HTML。
<div ng-cloak class="ng-cloak row" style="margin-bottom: 2em;">
<span style="margin-right: 2em;">
<span class="small" style="margin-right: 0.5em;">Folder</span>
<div class="btn-group">
<button type="button" class="btn btn-default">Sent</button>
<button type="button" class="btn btn-default">Outbox</button>
</div>
</span>
... other buttons and labels are the same layout ...
<div class="pull-right">
<span class="small" style="margin-right: 0.5em;">
<strong>1 - 30</strong> of <strong>255</strong>
</span>
<ul class="pagination" style="margin: 0px !important;">
<li><a>«</a></li>
<li><a>»</a></li>
</ul>
</div>
</div>
在<ul class="pagination">
元素中设置vertical-align: middle;
:
<ul class="pagination" style="margin: 0px !important; vertical-align: middle;">
我有一个分页元素可以移动到上一页/下一页。我想在它之前显示一个标签以显示当前和总项目数。例如:
1 - 30 共 2,950 [ < Prev ]
[ Next > ]
我不确定如何正确对齐。我在同一行中还有其他按钮/标签,并且希望所有内容都居中对齐。这是我得到的屏幕截图。
还有,我希望它如何显示。
一个 plunkr 代码演示了这个问题:
http://plnkr.co/edit/SaYpq1ov4MPBCGcAUQVt?p=preview
这是我正在使用的 HTML。
<div ng-cloak class="ng-cloak row" style="margin-bottom: 2em;">
<span style="margin-right: 2em;">
<span class="small" style="margin-right: 0.5em;">Folder</span>
<div class="btn-group">
<button type="button" class="btn btn-default">Sent</button>
<button type="button" class="btn btn-default">Outbox</button>
</div>
</span>
... other buttons and labels are the same layout ...
<div class="pull-right">
<span class="small" style="margin-right: 0.5em;">
<strong>1 - 30</strong> of <strong>255</strong>
</span>
<ul class="pagination" style="margin: 0px !important;">
<li><a>«</a></li>
<li><a>»</a></li>
</ul>
</div>
</div>
在<ul class="pagination">
元素中设置vertical-align: middle;
:
<ul class="pagination" style="margin: 0px !important; vertical-align: middle;">