Навигационная панель Bootstrap – как спустить навигационную панель с фиксированной вершиной?

Как я могу заставить следующие меню плавать вместе со страницей/телом при изменении размера браузера по ширине?

http://jsfiddle.net/J7jJh/1/show/

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
     // ...

Фиксированный отлично работает http://jsfiddle.net/WWf3x/show/, но мне не нужен панель навигации вверху, и я не могу понять, как использовать margin или float с navbar-fixed-top, чтобы опустить ее и одновременно толкнуть тело вниз, а также не перекрываться с помощью прокрутки.


twitter-bootstrap
person genxgeek    schedule 16.07.2013    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Хотя, вероятно, можно сдвинуть navbar-fixed-top вниз вместе с телом, более чистым решением было бы попытаться применить адаптивные классы к navbar, поскольку BootStrap 2.3, похоже, этого не делает. Это позволит вам сохранить работу navbar-fixed-top, если вы решите использовать ее в будущем или в другом макете.

Беглый взгляд на различия между navbar-fixed-top и navbar в исходном коде CSS BootStrap дает нам возможность внести дополнения в файл css.

Вот рабочая демонстрация. Вот код css для добавления:

.navbar .container{
    width: 940px;
}

@media (min-width: 1200px) {
    .navbar .container
    {
        width: 1170px;
    }
}

@media (min-width: 768px) and (max-width: 979px) {
    .navbar .container
    {
        width: 724px;
    }    
}
person edsioufi    schedule 12.08.2013