代码之家 › 专栏 › 技术社区 › Ynjxsjmh

在引导程序4中更换寻呼机和上一个/下一个引导程序3类

twitter-bootstrap css html

Ynjxsjmh · 技术社区 · 5 年前

我以前用过 pager 类来实现分页。

<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 is dropped .我在书中找到了很多例子 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 3中所做的事情?

0 回复 | 直到 5 年前

Ynjxsjmh 5 年前

------更新----

简单的改变 justify-content-center 到 justify-content-between 会成功的。

-------原始答案----------

虽然我没有找到直接的解决方案,但我使用了中描述的替代方案 https://github.com/e107inc/e107/issues/2962 具有 Bootstrap 4 Buttons 和 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 班

该按钮有多种风格,便于选择。