Html 按钮和分页的 Bootstrap 对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19768389/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap alignment of button and pagination
提问by Marcello90
I am using Twitter Bootstrap 3 to build my new website. I want to place a button on the left side and a pagination on the right side.
我正在使用 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>
My problem is that I am unable to align the both elements properly:
我的问题是我无法正确对齐这两个元素：
The pagination has a small offset.
分页有一个小的偏移量。
What can i do to remove that offset?
我该怎么做才能消除该偏移量？
采纳答案by Sujata Chanda
Try adding ths:-
尝试添加这些：-
.pagination {
margin: 0px !important;
}
回答by Matthew Trow
Wrap a semantic descriptive class around your button and pagination, such as .navigation-bar and use this to target the margin on the .pagination:
在按钮和分页周围包裹一个语义描述类，例如 .navigation-bar 并使用它来定位 .pagination 上的边距：
.navigation-bar .pagination {
margin-top: 0;
}
You should never override a framework class directly, as it would apply across your entire code base. The alternative is to simply extend the .pagination class:
您永远不应该直接覆盖框架类，因为它会应用于您的整个代码库。另一种方法是简单地扩展 .pagination 类：
<ul class="pagination no-margin pull-right">
回答by HenryW
I would go for:
我会去：
<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>
if you replace the <ul><li....with buttons , you not need to use style="margin: 0;
如果<ul><li....用按钮替换，则不需要使用style="margin: 0;
Example here: http://getbootstrap.com/components/#btn-groups-toolbar
这里的例子：http: //getbootstrap.com/components/#btn-groups-toolbar
回答by Ricky Stam
Put the below styling in the ul element:
将以下样式放在 ul 元素中：
<ul style="margin-top:0;" class="pagination pull-right">
回答by Samih
add this class to your ul and in your css:
将此类添加到您的 ul 和 css 中：
.no-top-margin {
margin-top: 0;
}
or this to your button and css:
或者这对您的按钮和 css：
.add-top-margin {
margin-top: 20px;
}
Also I would recommend Googling and reading some beginner tutorials on using either Chrome Developer Tools or Firebug for firefox, especially if you are going to be doing more html/web development in the future :-).
此外，我建议您使用谷歌搜索并阅读一些关于使用 Chrome 开发者工具或 Firebug 进行 firefox 的初学者教程，特别是如果您将来要进行更多的 html/web 开发:-)。
回答by Samih
You could set a width and use margins to centre it on the page. Also note for this solution to work you have to remove .pull-rightfrom the ul
您可以设置宽度并使用边距使其在页面上居中。另请注意，要使此解决方案起作用，您必须.pull-right从ul
Here is the HTML:
这是 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>
Here is the CSS:
这是CSS：
.pagination {
display: block;
width: 232px;
margin: 0 auto;
background: #ccc;
}
回答by Rahul
`<div class="pagination justify-content-center pagination-large" id="pagination-demo">
`
`
justify-content-center will flex your pag to center
justify-content-center 会将你的页面弯曲到中心
回答by user1199842
You can put it in a table & then apply margin top.
您可以将其放在表格中，然后在顶部应用边距。
<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>
