web-dev-qa-db-ja.com

Bootstrap 4列の中央ページネーション

Bootstrap 4を使用して、グリッド列内でpagination ULを水平方向に中央に配置しようとしています。これで、paginationはdisplay:flex適切に中央に配置しないでください。

useonlyexisting Bootstrap classesw/o中央に配置するための追加のCSS。

text-center、mx-auto、align-items-centerを使用してみましたが、何も機能しないようです。

<div class="container">
    <div class="row">
        <div class="col-lg-6 offset-lg-3 py-5 border">
            <ul class="pagination mx-auto">
                <li class="page-item disabled">
                    <a class="page-link" href="#" aria-label="Previous">
                        <span aria-hidden="true">«</span>
                        <span class="sr-only">Previous</span>
                    </a>
                </li>
                <li class="page-item active">
                    <a class="page-link" href="#">1</a>
                </li>
                <li class="page-item"><a class="page-link" href="#">2</a></li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item"><a class="page-link" href="#">4</a></li>
                <li class="page-item">
                    <a class="page-link" href="#" aria-label="Next">
                        <span aria-hidden="true">»</span>
                        <span class="sr-only">Next</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

コード例

csstwitter-bootstrapflexboxbootstrap-4twitter-bootstrap-4
9
Zim

列をdisplay：flexをd-flexを使用して変更し、mx-autoがページネーションULを中央に配置するようになりました...

これは追加のCSSなしで動作します

<div class="container">
    <div class="row">
        <div class="col-lg-6 offset-lg-3 py-5 border d-flex">
            <ul class="pagination mx-auto">
                <li class="page-item disabled">
                    <a class="page-link" href="#" aria-label="Previous">
                        <span aria-hidden="true">«</span>
                        <span class="sr-only">Previous</span>
                    </a>
                </li>
                <li class="page-item active">
                    <a class="page-link" href="#">1</a>
                </li>
                <li class="page-item"><a class="page-link" href="#">2</a></li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item"><a class="page-link" href="#">4</a></li>
                <li class="page-item">
                    <a class="page-link" href="#" aria-label="Next">
                        <span aria-hidden="true">»</span>
                        <span class="sr-only">Next</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

http://www.codeply.com/go/JQKwUW2Tjg

または、justify-content-centerクラスを「ページネーション」ULで使用できます。

12
Zim

justify-content: center;クラスに.paginationを追加するだけです

.pagination {
   justify-content: center;
}

作業コードは次のとおりです。 https://jsfiddle.net/r9z25u06/

39
Mukesh Ram

.justify-content-centerulでクラス.paginationを使用します。

例えば<ul class="pagination justify-content-center">

14
kjdion84

Bootstrap 4のソリューション

使用できますAlignmentこのクラスを使用justify-content-center

flexbox Utilities でページネーションコンポーネントの配置を変更します。

そしてそれについてもっと学ぶ pagination

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>
5
core114