0

我有一个 bulma分页元素，我想在它的右侧放置一个 html 选择。我使用关卡组件来实现我的目标，但它不起作用。

这是我的html代码：

<div class="level">
    <div class="level-left">
        <nav class="pagination">
            <a class="pagination-previous" disabled="disabled">
                <span class="icon is-small"><i class="fa fa-chevron-left"></i></span>
            </a>
            <a class="pagination-next">
                <span class="icon is-small"><i class="fa fa-chevron-right"></i></span>
            </a>
            <ul class="pagination-list">
                <li>
                    <a class="pagination-link is-current">1</a>
                </li>
                <li>
                    <a class="pagination-link">2</a>
                </li>
                <li>
                    <span class="pagination-ellipsis">…&lt;/span>
                </li>
                <li>
                    <a class="pagination-link">32</a>
                </li>
            </ul>
        </nav>
    </div>
    <div class="level-right">
        <div class="select is-fullwidth">
            <select name="limit" id="limit">
                <option value="">Records per page:</option>
                <option value="10">10</option>
                <option value="15">15</option>
                <option value="20">20</option>
            </select>
        </div>
    </div>
</div>

这就是我得到的：

内层分页

您会注意到分页下一个和上一个按钮放置在靠近分页编号的位置，这不是默认行为。

有人可以帮忙吗？

4

1 回答 1

0

从我从 Bulma 级别组件中看到的，它们不是全宽的。

使用 Chrome 或任何浏览器中的检查器，您将看到 Bulma 实际执行的操作：

justify-content: space-between;

差不多就是这样。一个 flexbox，和空格之间的和命令来确定之后是什么。

所以 Bulma 代码完美地工作，你的包含分页按钮的元素不够宽，不能全宽。如果你把它变大，你会看到你所谓的默认行为。

如果我不够清楚，请考虑制作一个小提琴或你的情况片段，我可以更新以向你展示该怎么做。

于 2017-07-24T04:49:35.497 回答