Question

我尝试了不同的插件，比如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。

非常欢迎您的建议。

Answer 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/

Answer 2

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

Answer 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>');
});

Answer 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');
        });
});

导航元素之间的Bootstrap分页

4 个答案: