导航元素之间的引导分页答案

【问题标题】：Bootstrap Pagination between navigation elements导航元素之间的引导分页
【发布时间】：2014-04-01 19:52:26
【问题描述】：

我尝试了不同的插件，如 bootstrap-paginator 和 bootstrap-pagination-js，通过动态生成的 <li> 元素进行分页，使它们不超过一行。

想要的结果：一行日期，右边和左边分别有下一个和上一个按钮。

我试过的插件对我没有用。

我的代码如下所示：

<div class="row">
    <div class="col-md-12 column">      
        <ul class="nav nav-pills center-pills text-center">         
            <li class="active">
                <a href="#">
                <span class="text-center badge pull-right span-list">1</span>
                1 Mars
                </a>
            </li>
            <li class=""><a href="#">2 Mars</a></li>
            <li class=""><a href="#">3 Mars</a></li>
            <li class=""><a href="#">4 Mars</a></li>
            <li class=""><a href="#">etc</a></li>
            <li class=""><a href="#">etc</a></li>
            <li class=""><a href="#">etc</a></li>
            <li class=""><a href="#">etc</a></li>
            <li class=""><a href="#">etc</a></li>
            <li class=""><a href="#">etc</a></li>
            <li class=""><a href="#">etc</a></li>
            <li class=""><a href="#">etc</a></li>
        </ul>       
    </div>
</div>

代码fiddle。

您的建议将非常受欢迎。

【问题讨论】：

任一答案是否解决了您的问题？如果没有，您能否详细说明您想要实现的目标？

标签： javascript jquery css twitter-bootstrap pagination

【解决方案1】：

您在造型上有问题吗？如果是这样……

我已将行高设置为固定，并隐藏了溢出，以便您只获得一排按钮。

.row{overflow:hidden;height:42px;}

我添加了一个上一个和下一个按钮，并让它们分别向左和向右浮动。我希望这不会违反您的分页框架。如果您想要一个如何以编程方式添加这些元素的示例，请告诉我。

HTML

<li class="next"><a href="#">Next</a></li>
<li class="prev"><a href="#">Previous</a></li>

CSS

li.next{float:right;}
li.prev{float:left;}

我相信这会产生预期的结果...如果我错过了您的意图，请告诉我。

免责声明：我只在 Opera 19.0 中对此进行了测试。我目前无法访问 Firefox/Chrome/IE。

示例： http://jsfiddle.net/nickg1/5ELfQ/2/

更新：更新以移除水平滚动条。 - http://jsfiddle.net/nickg1/5ELfQ/3/

【讨论】：

【解决方案2】：

我在 Bootstrap 分页上取得了成功。如果您生成的元素过多而无法放入所需的空间，则需要找出一种方法来生成更少的元素，或者使用 css 来限制分页空间的大小并“切断”溢出的元素。

【讨论】：

【解决方案3】：

你可以做的是 .prepend() 一个左 li 和 .append() 一个右 li：

$(document).ready(function () {
$('.nav').prepend('<li class="left"><a>Left</a></li>');
$('.nav').append('<li class="right"><a>Right</a></li>');
});

【讨论】：

【解决方案4】：

虽然这个解决方案几乎没有浏览器兼容性和样式问题。但我希望这会给你一个开始的想法。

我的 CSS：

.nav.nav-pills {
    width:auto;
    overflow:hidden; 
    white-space:nowrap; 
    text-overflow:ellipsis;
    position: relative;
    padding-right: 38px;
    display: inline-block;
}
.nav-pills > li {
    display: inline-block !important;
    float: none !important;
}
.nav-pills > li.last {
    position: absolute;
    right: 0;
}

由于display:inline; 应用于.nav，因此在包装div 中使用text-center 类进行居中。即

<div class="col-md-12 column text-center">

将 jQuery 应用于上一个/下一个按钮和调整大小问题。

$(document).ready(function () {
    $('.nav').prepend('<li><a href="#">&laquo;</a></li>');
    $('.nav').append('<li class="last"><a href="#">&raquo;</a></li>');

    var ulWidth = $('.nav').width();
    var screenWidth = document.body.clientWidth;
        if (screenWidth < ulWidth ){
            $('.nav').css('width', '100%');
        }

        $(window).resize(function(){
            screenWidth = document.body.clientWidth;
            screenWidth < ulWidth == true ?
            $('.nav').css('width', '100%') :
            $('.nav').css('width', 'auto');
        });
});

【讨论】：