Bootstrap詞綴更改列表項寬度

我正在使用Twitter Bootstrap的詞綴來粘貼當前包含導航列表的左列。Bootstrap詞綴更改列表項寬度

<div class="row"> 
    <div class="span3"> 
     <ul class="nav nav-list" data-spy="affix" data-offset-top="300"> 
      <li class="nav-header">Navigation</li> 
      <li><a href="#">Link1</a></li> 
      <li><a href="#">Link2</a></li> 
     </ul> 
    </div>

從我的理解，這意味着詞綴將不會踢，直到300px已滾動。我的問題是我的列表項目的寬度在添加後綴處於變化狀態。

這裏是懸停在粘貼前的列表項的懸停的屏幕截圖。您可以基於懸停背景，寬度是正確的。

Before Affix

下面是截圖我滾動300像素，並加蓋在踢後，你可以看到，由於某種原因，寬度減小。

After Affix

我想知道爲什麼發生這種情況，如何糾正它，如果我使用正確粘貼。

來源

2013-06-26 Sajan Parikh

它看起來像你正確使用它。你可以發佈你的其他CSS？ – BjornJohnson

@BjornJohnson，除了默認的Bootstrap以外，沒有其他CSS（使用Bootswatch主題）。雖然，我想出來並回答了我自己的問題。謝謝。 –

經過一番研究，我發現問題在哪裏。

在詞綴開始之前，寬度從「span3」div繼承，並帶有父母我的nav。
粘貼後，粘貼的導航被從該父母刪除，這就是爲什麼它失去了它的寬度。插件插件基本上將其從DOM中撕下並手動將貼好的元素放在頂部。

解決方案是手動給.affix類一個寬度。在我的例子中，我給了它一個模擬span3父項的寬度。

.affix { 
    position: fixed; 
    top: 20px; 
    width: 190px; 
}

span3是220px寬度，左右兩邊都是15px填充。所以我把上面的CSS工作。

如果您有多個詞綴，您必須正確選擇並應用不同的寬度。

來源

2013-06-26 01:16:02

很酷。 FWIW，我建議在該元素中添加另一個類來設置寬度，而不是爲.affix類添加寬度聲明，如.affix.whatever {width：190px}（如果要在其他地方使用Affix，該怎麼辦？）但是你會比我更瞭解你的項目。 – BjornJohnson

但是..這是不響應，因爲你正在設置像素...嘗試調整窗口大小 – janscas

Bootstrap詞綴更改列表項寬度

回答

相關問題