[英]Matching Height of Bootstrap Pagination Element with Sibling Element
I'm working with Bootstrap's .pagination
class inside a .container-fluid .row .col-*-*
structure: 我正在使用
.container-fluid .row .col-*-*
结构内的Bootstrap的.pagination
类:
<div class="container-fluid" style="border: 1px solid black">
<div class="row">
<div class="col-xs-6" style="border: 1px solid red">
<nav>
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
<div class="col-xs-6" style="vertical-align:middle; border: 1px solid red">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input class="form-control" aria-label="..." type="text">
</div><!-- /input-group -->
</div>
</div>
</div>
The issue is with the alignment of the .input-group
beside the .pagination
element. 问题在于
.pagination
元素旁边的.pagination
.input-group
的对齐方式。 Notice that the pagination element takes up much more vertical space than the .input-group
, and as such the .input-group
floats awkwardly above and to the right of it. 注意,分页元素比
.input-group
占用更多的垂直空间,因此.input-group
笨拙地浮动在其上方和右侧。 I've tried adding style="vertical-algin:middle"
to a couple different spots, like the .container-fluid
<div>
and each of the .row
and .col-*-*
<div>
s, but no luck fixing it. 我尝试将
style="vertical-algin:middle"
到几个不同的位置,例如.container-fluid
<div>
以及每个.row
和.col-*-*
<div>
,但是没有运气修复它。
You can go ahead and just use this CSS selector to remove the margin throwing you out of alignment: 您可以继续,只需使用此CSS选择器即可删除使您无法对齐的边距:
.pagination {
margin:0;
}
Naturally you will want to scope that selector to a wrapping ID or class so you don't override ALL .pagination
elements. 自然,您将需要将该选择器的作用域
.pagination
为包装ID或类,以免覆盖所有.pagination
元素。
Here's a CodePen for you to see what's going on. 这是一个CodePen,供您查看发生了什么。
http://codepen.io/stat30fbliss/pen/gbEYXx http://codepen.io/stat30fbliss/pen/gbEYXx
Let me know if you have any questions! 如果您有任何疑问,请告诉我!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.