bulma在分页元素右侧放置一个元素

时间:2017-07-23 17:12:26

标签: html css css3 bulma

我有一个bulma pagination元素,我想在它的右侧放置一个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">…</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>

这就是我得到的:

pagination inside level

你可以注意到分页的下一个和前一个按钮靠近分页编号,这不是默认行为。

有人可以帮忙吗。

1 个答案:

答案 0 :(得分:0)

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

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

justify-content: space-between;

这就是它。一个弹性箱,空间和命令,以确定什么是什么。

所以Bulma代码工作得很好,包含分页按钮的元素不够宽,不能全宽。如果你把它做得更大,你会看到你称之为默认行为。

如果我不够清楚,请考虑制作一个小提琴或片段,我可以更新以告诉你该怎么做。