Замена пейджера и предыдущего / следующего класса bootstrap 3 на bootstrap 4

Question

Я использовал pager класс в Bootstrap 3 для реализации нумерации страниц.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<style>
select {
    border: 0px;
    outline: 0px;
}
</style>

<ul class="pager">
    <li class="previous disabled">
        <a>&larr; Newer</a>
    </li>

    <li>
        <span>
            Page:
            <select name="pagelist" style="margin-top: 0px;">
                <option value="1" selected="selected">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
            of 3
        </span>
    </li>

    <li class="next">
        <a>Older &rarr;</a>
    </li>
</ul>

В эти дни я обновляюсь до Bootstrap 4 и нахожу, что pager отброшено . Я нахожу много примеров в Bootstrap 4 Pagination , поэтому я изменяю свой код ниже:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<style>
select {
    border: 0px;
    outline: 0px;
}
</style>

<ul class="pagination justify-content-center">
    <li class="page-item previous disabled">
        <a class="page-link">&larr; Newer</a>
    </li>

    <li class="page-item">
        <a class="page-link">Page:
            <select name="pagelist" style="margin-top: 0px;">
                <option value="1" selected="selected">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
            of 3
        </a>
    </li>

    <li class="page-item next" style="float:right">
        <a class="page-link">Older &rarr;</a>
    </li>
</ul>

Как видите, классы previous и next также пропущены, и я не нашел примеров в этом официальном уроке. Я пытался добавить к ним стиль float, но он не работает.

Я обнаружил аналогичную проблему в https://github.com/e107inc/e107/issues/2962, но, похоже, вместо этого он изменился на <div> , Есть ли способ использовать pagination класс в Bootstrap 4 для реализации того, что я делаю в Bootstrap 3?

Answer 1

------ Обновление ----

Простое изменение justify-content-center на justify-content-between поможет.

------- Оригинальный ответ - ---------

Хотя я не нахожу прямого решения, я использую альтернативу, описанную в https://github.com/e107inc/e107/issues/2962 с Bootstrap 4 кнопками и Bootstrap 4 Flex .

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<style>
select {
    border: 0px;
    outline: 0px;
}
</style>


<div class="d-flex justify-content-between">
    <div class="pager-button btn btn-outline-primary disabled">
        <a>&larr; Newer</a>
    </div>

    <div class="pager-button btn btn-outline-primary">
        <a>Page:
            <select name="pagelist" style="margin-top: 0px;">
                <option value="1" selected="selected">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
            of 3
        </a>
    </div>

    <div class="pager-button btn btn-outline-primary">
        <a>Older &rarr;</a>
    </div>
</div>

Примечание. Не стесняйтесь удалять pager-button class.

А у кнопки много стилей, среди которых удобно выбирать.