按钮和分页的Bootstrap对齐

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="#">&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>

My problem is that I am unable to align the both elements properly:

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

http://bootply.com/91723

The pagination has a small offset.

分页的偏移很小。

What can i do to remove that offset?

我该怎么做才能消除这种偏移?

8 个解决方案

#1

Try adding ths:-

尝试添加: -

.pagination {
margin: 0px !important;
}

#2

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

http://bootply.com/91736

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

#3

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>

http://www.bootply.com/116457

if you replace the <ul><li.... with buttons , you not need to use style="margin: 0;

如果用按钮替换

Example here: http://getbootstrap.com/components/#btn-groups-toolbar

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

#4

Put the below styling in the ul element:

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

<ul style="margin-top:0;" class="pagination pull-right">

#5

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 for firefox的初学者教程,特别是如果你将来要做更多的html / web开发:-)。

#6

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-right from the ul

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

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

#7

-1

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="#">&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>

#8

-1

`<div class="pagination justify-content-center pagination-large" id="pagination-demo">

justify-content-center will flex your pag to center

justify-content-center将把你的pag弯曲到中心

#1