Bootstrap: раскрывающееся меню охватывает контент

Мой код сэкономит http://jsfiddle.net/qba2xgh6/1/, он исходит из официального сайта Bootstrap.Bootstrap: раскрывающееся меню охватывает контент

Ниже приведен код:

<div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 

     <a class="navbar-brand" href="index.php">My Brand</a> 
    </div> 
    <div class="collapse navbar-collapse navbar-right"> 
     <ul class="nav navbar-nav"> 
     <li><a href="index.php">Home</a></li> 
     <li><a href="#contact">Contact</a></li> 
     </ul> 
    </div><!--/.nav-collapse --> 
    </div> 
</div> 

<div class="container main"> 
    <p> 
    Hello, the main content starts here. 
    Hello, the main content starts here. 
    Hello, the main content starts here. 
    Hello, the main content starts here. 
    Hello, the main content starts here. 
    Hello, the main content starts here.Hello, the main content starts here. 
    </p> 
</div>

Проблема заключается в том, что, когда я нажал на кнопку с в правом верхнем углу, выпадающее меню появляется и охватывает основное содержание. Как я могу избежать этого? Я бы хотел, чтобы он нажал основной контент.

источник

2014-11-28 shapeare

Это потому, что вы используете класс navbar-fixed-top, который делает навигационную стойку неподвижной - вне потока на документе. Вы можете:

Удалить этот класс. Но он также удалит поведение на всех устройствах и разрешениях.
Если вы хотите сохранить, что для всех, но не для мобильных устройств затем добавить этот медиа-запрос:
```
@media (max-width:768px) { 
    .main { 
     margin-top:0; 
    } 
    .navbar-fixed-top { 
     position:static; 
    } 
} 
```

Проверить эту DemoFiddle

источник

2014-11-28 15:00:01 DaniP

К сожалению, 'позиции: статический;' похоже, не работает. Я добавил много больше текста, чтобы проверить его. См. Http://jsfiddle.net/qba2xgh6/5/ Навигационная панель прокручивается вместе с текстом. – shapeare

@shapeare obviusly, потому что он больше не исправлен ... i f вы хотите, чтобы он был исправлен после того, как прокрутка понадобится jquery. – DaniP

Удалить класс navbar-fixed-top от внешнего <div>

источник

2014-11-28 14:57:40 ckuijjer

Вы видите предполагаемое поведение для fixed navigation. Если вы удалите класс .navbar-fixed-top при навигации, он удалит «липкость» навигации, и он будет следовать потоку содержимого.

Вы можете подать образец на http://jsfiddle.net/qba2xgh6/4/, я также удалил маржу с .main, поскольку он больше не нужен.

источник

2014-11-28 14:58:14 dotty

Я столкнулся с этой проблемой, когда впервые начал использовать Bootstrap. Когда вы используете класс navbar-fixed-top, навигатор останется в верхней части страницы. Удалите это, и тогда он будет работать, как ожидалось.

источник

2014-11-28 14:58:15 Izzy

Bootstrap: раскрывающееся меню охватывает контент

ответ

Смежные вопросы