Bootstrap: How to fix (freeze) header with grid saving

Снимок экрана 2016-03-29 в 10.20.48If you would like to fix (or freeze) some div on top (such as header/footer/menu), you should to use "affix" class according to manual. But it conflicts with Bootstrap grid system, so when «fixed position» style activated then it takes the header out of normal flow and the result is that it’s floating to the left! It is really easy to fix by using width: inherit; CSS style in your fixed div.

So to freeze your header on top you need:
1. Add affix class to header div
2. Add header { width: inherit; } to your CSS file.
3. If you want to slide content from header, add margin-top: *** px; to your content class.
It works!

Bootstrap fixed div (affix)

PS: Thanks to ezgif.com for best video-to-gif converter!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *