按钮和分页的Bootstrap对齐

Question

我正在使用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

分页的偏移很小.

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

Answer 1

围绕按钮和分页包装一个语义描述类,例如.navigation-bar并使用它来定位.pagination上的边距:

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

http://bootply.com/91736

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

<ul class="pagination no-margin pull-right"> 

Answer 2

尝试添加: -

.pagination {
margin: 0px !important;
}

Answer 3

我会去:

<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