ブートストラップ貼り付けリスト項目幅を変更する

Question

現在、ナビゲーションリストを保持している左の列を貼り付けるためにTwitter 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がスクロールされるまで貼り付けられないことを意味します。私の問題は、貼り付けの後にリスト項目の幅が変わることです。

貼り付け前のリスト項目の上にカーソルを置いたスクリーンショットです。ホバーの背景に基づいて、幅が正しいことができます。ここで

私は300ピクセルをスクロールし、中にキックを貼付した後のスクリーンショットです。あなたは幅が減少し、何らかの理由でそれを見ることができます。

私は、これはそれを修正する方法を、起こっている理由は、私が正しく貼付使用しているかどうかを知りたいです。

Answer 1

いくつかの調査の後、私は問題が何かを理解しました。

1. 接写が始まる前に、幅は「span3」divから継承されています。

2. 貼り付けが行われた後、貼り付けられたnavはその親から削除されます。これは、その幅を失っているからです。接尾辞プラグインは、基本的にそれをDOMから取り除き、貼り付けられた要素を手動で上に置きます。

解決方法は、手動で.affixクラスの幅を指定することです。私の場合は、span3の親をシミュレートする幅を与えました。

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

span3は、左右両方に15ピクセルのパディングで、220pxの幅です。だから私は上記のCSSを入れて働いています。

複数の添え字がある場合は、適切な幅を選択して適用する必要があります。