Bootstrap導航元素之間的分頁

我嘗試了不同的插件，例如bootstrap-paginator和bootstrap-pagination-js，通過動態生成<li>元素進行分頁，以便它們不會超過一行。Bootstrap導航元素之間的分頁

的通緝的結果：分別在右側和左側有一個和上一個按鈕日期一行。

，我試過的插件都沒有對我有用。

我的代碼如下所示：

<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。

您的建議將是非常歡迎的。

來源

2014-02-28 4m1nh4j1

有沒有解決您的問題的答案？如果沒有，請你詳細說明你想達到的目標嗎？ –

您是否遇到樣式問題？如果是這樣的......

我設置的行高度固定，並取得了溢出隱藏，這樣你得到的只是一排按鈕。

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

我已經添加了prev和next按鈕，並使它們分別左右浮動。我希望這不會違反你的分頁框架。如果您想要以編程方式添加這些元素的示例，請告訴我。

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/

來源

2014-03-02 23:20:38

我曾與引導分頁成功。如果您生成的元素太多以適合您所需的空間，則需要找出減少生成方式或使用css來限制分頁空間大小並「切斷」溢出元素的方法。

來源

2014-02-28 17:15:05 Starscream1984

你可以做的是.prepend（）左麗和.append（）右李：

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

來源

2014-03-05 18:50:21 poxopox

雖然在這個解決方案的小瀏覽器的兼容性和樣式的問題。但我希望這會給你一個啓動的想法。

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

來源

2014-03-08 07:44:37 Iqbal

Bootstrap導航元素之間的分頁

回答

相關問題