按鈕和分頁的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

Answer 4

將下面的樣式放在ul元素中：

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

Answer 5

將此類添加到ul和css中：

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

或者這是你的按鈕和CSS：

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

另外，我建議使用谷歌搜索和閱讀一些關於使用Chrome開發者工具或Firebug for firefox的初學者教程，特別是如果你將來要做更多的html / web開發:-)。

Answer 6

您可以設置寬度並使用邊距使其居中在頁面上。 另請注意，對於此解決方案，您必須從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;
}

Answer 7

您可以將其放在表格中然后應用保證金頂部。

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

Answer 8

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

`

justify-content-center將你的pag彎曲到中心