[英]Bootstrap alignment of button and pagination
我正在使用Twitter Bootstrap 3来构建我的新网站。 我想在左侧放置一个按钮,在右侧放置一个分页。
<button type="button" class="btn btn-default pull-left">Default</button>
<ul class="pagination pull-right">
<li><a href="#">«</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="#">»</a></li>
</ul>
我的问题是我无法正确对齐这两个元素:
分页的偏移很小。
我该怎么做才能消除这种偏移?
围绕按钮和分页包装一个语义描述类,例如.navigation-bar并使用它来定位.pagination上的边距:
.navigation-bar .pagination {
margin-top: 0;
}
您永远不应该直接覆盖框架类,因为它将适用于整个代码库。 另一种方法是简单地扩展.pagination类:
<ul class="pagination no-margin pull-right">
尝试添加: -
.pagination {
margin: 0px !important;
}
我会去:
<div class="btn-toolbar" role="toolbar" style="margin: 0;">
<div class="btn-group">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
</div>
<div class="btn-group pull-right">
<ul class="pagination" style="margin: 0;">
<li><a href="#">«</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="#">»</a></li>
</ul>
</div>
</div>
如果用按钮替换<ul><li....
,则不需要使用style="margin: 0;
示例: http : //getbootstrap.com/components/#btn-groups-toolbar
将下面的样式放在ul元素中:
<ul style="margin-top:0;" class="pagination pull-right">
将此类添加到ul和css中:
.no-top-margin {
margin-top: 0;
}
或者这是你的按钮和CSS:
.add-top-margin {
margin-top: 20px;
}
另外,我建议使用谷歌搜索和阅读一些关于使用Chrome开发者工具或Firebug for firefox的初学者教程,特别是如果你将来要做更多的html / web开发:-)。
您可以设置宽度并使用边距使其居中在页面上。 另请注意,对于此解决方案,您必须从ul
删除.pull-right
这是HTML:
<button type="button" class="btn btn-default pull-left">Default</button>
<ul class="pagination pull-right">
<li><a href="#">«</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="#">»</a></li>
</ul>
这是CSS:
.pagination {
display: block;
width: 232px;
margin: 0 auto;
background: #ccc;
}
您可以将其放在表格中然后应用保证金顶部。
<table>
<tr>
<td>
<button type="button" class="btn btn-default pull-left">
Default</button>
</td>
<td>
<ul class="pagination pull-right">
<li><a href="#">«</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="#">»</a></li>
</ul>
</td>
</tr>
`<div class="pagination justify-content-center pagination-large" id="pagination-demo">
`
justify-content-center将你的pag弯曲到中心
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.