Bootstrap 3.1.0：詞綴太長

我正在使用Bootstrap 3.1.0。當一個「詞綴」對視口太長時，會被切斷，從不顯示底部項目。Bootstrap 3.1.0：詞綴太長

是否有可能讓Bootstrap的詞綴以某種方式表現出來，即用戶仍然可以從上到下滾動完整詞綴？

有問題的例子：

<div class="container"> 
    <div class="row"> 

     <div class="col-md-3"> 
      <div class="list-group" id="sidebar"> 
       <a href="#" class="list-group-item">Long</a> 
       <a href="#" class="list-group-item">list</a> 
       <a href="#" class="list-group-item">with</a> 
       <a href="#" class="list-group-item">many</a> 
       <a href="#" class="list-group-item">entries</a> 
       ... 
       <a href="#" class="list-group-item">29. Last</a> 
      </div> 
     </div> 

     <div class="col-md-9"> 
      ... regular content  
     </div> 

    </div> 
</div>

I hope my jsFiddle exemplifies this problem。

來源

2014-02-11 Abdull

我不知道你的特定用例，但是它是否完全有必要在一個詞綴中包含那個大於視口的項目？在你的例子中，如果我用較小寬度的視口加載頁面，那麼我必須滾動瀏覽那麼多元素，因爲邊欄被加載到頁面的頂部。我覺得如果你有可擴展的部分，你會有更好的結果和用戶體驗，並試圖最小化側邊欄的大小。 – Kautiontape

我希望它可以幫助你：

只需添加一個overflow-y

的jsfiddle：http://jsfiddle.net/Ja3XT/1/

增加的CSS：

#sidebar{ 
max-height: 100%; 
overflow-y: auto; 
}

更新後評論：

小提琴：http://jsfiddle.net/F4FZL/1/

JS：

$('#sidebar').affix({ 
    offset: { 
     top:100, 
     bottom:0 
    } 
}); 


$('#sidebar').on('affixed.bs.affix', function(){ 
    $(this).removeAttr('style'); 
});

來源

2014-02-11 09:20:41 pbenard

謝謝，這已經將我指向了一個很好的方向。雖然我注意到當http://jsfiddle.net/Ja3XT/1/上的解決方案在* content部分*比* affix部分*更短時可能會遇到可用性問題。這裏是jsFiddle舉例說明這個問題（至少在Chrome 33和IE 11中存在問題）：http://jsfiddle.net/Abdull/F4FZL/。當向下滾動時，窗戶四處跳動並跳回到上部，從不透露底部的粘貼部分。 – Abdull

我更新了，希望它會很好 – pbenard

我有同樣的問題。我花了幾個小時，finnaly我寫了下面的解決方案：

$('#sidebar').on('affix.bs.affix', function (e) { 
    var $this = $(this), 
     affix = $this.data('bs.affix'), 
     offset = affix.options.offset, 
     offsetBottom = offset.bottom; 

    if (typeof offset != 'object') { 
     offsetBottom = offset; 
    } 

    if (typeof offsetBottom == 'function') { 
     offsetBottom = offset.bottom($this); 
    } 

    if ($this.outerHeight() + $this.offset().top + offsetBottom === Math.max($(document).height(), $(document.body).height())) { 
     e.preventDefault(); 
    } 
});

您可以在http://jsfiddle.net/F4FZL/10/看到代碼，並在https://jsfiddle.net/F4FZL/10/embedded/result/與演示播放。

希望這些信息對您有所幫助。

來源

2015-06-05 08:07:45 user1636505

Bootstrap 3.1.0：詞綴太長

回答

相關問題