15

Twitter Bootstrap 3 を使用して新しい Web サイトを構築しています。左側にボタン、右側にページネーションを配置したい。

<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

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

また、今後さらに html/web 開発を行う場合は特に、Google で Chrome 開発者ツールまたは firefox 用の Firebug を使用するための初心者向けチュートリアルを読むことをお勧めします :-)。

于 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 に答える