Bootstrap: проблема с фиксацией блока ( affix)

[Devvega]

Приветствую коллеги!

Пытаюсь с помощью Bootstrap сверстать меню которое прокручивается до верхней границы экрана и там фиксируется.

В Bootstrap для этого есть специальный класс affix ( http://twitter.githu...ript.html#affix )

Вертикальную фиксацию сделал, но не могу решить проблему с шириной. До фиксации ширина одна, после фиксации - другая. Хотя величина в свойствах стоит одна и та же (23.4... %)

До фиксации:

.row-fluid .span3 {
width: 23.404255319148934%;
*width: 23.351063829787233%;
}

После фиксации:

.affix {
position: fixed;
top:0;
width: 23.404255319148934%;
/*
*width: 23.351063829787233%;*/
}

Ширина родительского элемента совпадает. Так в чём же проблема? Голову сломал.

Ссылка на проект: http://rghost.ru/44512730

Очень прошу помощи.

[mrnobody]

Допишите в 50 стройке style.css

.affix {
  position: fixed;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  top:0;
  width: inherit;
}

Edited March 15, 2013 by mrnobody

[Devvega]

Большое спасибо! Работает!

Правильно ли я понял что проблема была в том что в моём примере ширина рассчитывалась не учитывая padding и border и расчитывалась чисто ширина контента, а при использовании box-sizing: border-box; учитываются padding и border без margin?