15

我正在使用 Twitter Bootstrap 3 来构建我的新网站。我想在左侧放置一个按钮，在右侧放置一个分页。

<button type="button" class="btn btn-default pull-left">Default</button>

<ul class="pagination pull-right">
    <li><a href="#">&laquo;</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="#">&raquo;</a></li>
 </ul>

我的问题是我无法正确对齐这两个元素：

http://bootply.com/91723

分页有一个小的偏移量。

我能做些什么来消除这个偏移量？

4

8 回答 8

16

在按钮和分页周围包裹一个语义描述类，例如 .navigation-bar 并使用它来定位 .pagination 上的边距：

.navigation-bar .pagination {
      margin-top: 0;
    }

http://bootply.com/91736

您永远不应该直接覆盖框架类，因为它会应用于您的整个代码库。另一种方法是简单地扩展 .pagination 类：

<ul class="pagination no-margin pull-right">
于 2013-11-04T14:08:09.150 回答
10

尝试添加：-

.pagination {
margin: 0px !important;
}
于 2013-11-04T13:16:48.820 回答
8

我会去：

<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>

http://www.bootply.com/116457

如果你<ul><li....用按钮替换，你不需要使用style="margin: 0;

此处示例：http: //getbootstrap.com/components/#btn-groups-toolbar

于 2014-02-24T21:32:51.863 回答
2

将以下样式放在 ul 元素中：

<ul style="margin-top:0;" class="pagination pull-right">
于 2013-11-04T13:15:12.923 回答
0

将此类添加到您的 ul 和您的 css 中：

.no-top-margin {
  margin-top: 0;
 }

或者这个到你的按钮和css：

.add-top-margin {
    margin-top: 20px;
}

另外，我建议您使用谷歌搜索并阅读一些关于使用 Chrome 开发人员工具或 Firebug for firefox 的初学者教程，特别是如果您将来要进行更多的 html/web 开发:-)。

于 2013-11-04T13:19:07.940 回答
0

您可以设置宽度并使用边距使其在页面上居中。另请注意，要使此解决方案起作用，您必须.pull-right从ul

这是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;
}
于 2013-11-04T13:21:03.013 回答
-1

您可以将其放在表格中，然后在顶部应用边距。

<table>
<tr>
    <td>
        <button type="button" class="btn btn-default pull-left">
            Default</button>
    </td>
    <td>
        <ul class="pagination pull-right">
            <li><a href="#">&laquo;</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="#">&raquo;</a></li>
        </ul>
    </td>
</tr>

于 2013-11-04T13:19:08.143 回答
-1 
`<div class="pagination justify-content-center pagination-large" id="pagination-demo">

`

justify-content-center 会将您的页面弯曲到中心

于 2017-05-17T09:58:52.693 回答