Bootstrap Pagination between navigation items

Question

I tried various plugins like bootstrap-paginator and bootstrap-pagination-js to break pages into dynamically generated elements <li>so that they do not exceed one line.

Desired result: one row of dates with the following and previous buttons respectively on the right and left.

The plugins I tried were not useful to me.

My code is as follows:

<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 code .

Your suggestions will be very welcome.

Answer 1

Have a style problem? If so...

, .

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

prev next float . , . , , , .

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() left li .append() right 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, text-center div. .

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