Bootstrap Affix Изменение списка Элемент Ширина

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> 

Из моего понимания это означает, что аффикс не будет срабатывать до тех пор, пока не будет прокручена до 300 пикселей. Моя проблема заключается в том, что ширина элемента моего списка меняется после того, как аффиксирует ногами.

Вот скриншот моего зависания над элементом списка, прежде чем приступать к удалению. Вы можете основываться на фоне наведения, ширина правильная.

Вот скриншот после того, как я прокручивать 300px и наклеить пинки. Вы можете видеть, что по какой-то причине ширина уменьшается.

Я хочу знать, почему это происходит, как это исправить, и если я использую наклеить правильно.

Answer 1

После некоторых исследований я выяснил, в чем проблема.

1. Перед тем, как афикс ударит, ширина унаследована от div 'span3' с родителями моего прикрепленного nav.

2. После того как аффикс ударит, этот прикрепленный nav удаляется из этого родителя, поэтому он теряет свою ширину. Плагин аффикса в основном вырывает его из DOM и помещает прикрепленный элемент вручную сверху.

Решение состоит в том, чтобы вручную присвоить классу .affix ширину. В моем случае я дал ему ширину, которая имитирует родительский элемент span3.

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

span3 - ширина 220px, с прописью 15px и слева, и справа. Таким образом, моя работа над CSS была сработана.

Если у вас несколько аффиксов, вам нужно будет правильно выбрать и применить разные ширины.