2014-10-31 2 views
1

Почему это, что тот же самый код есть хороший верхний предел на начальной загрузки, например, но если я положил его в jsfiddle содержание под навигациисамозагрузки содержание под/за навигацией

http://jsfiddle.net/a60x81gw/

http://getbootstrap.com/examples/starter-template/

им с помощью theese Librarys

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 

код

<div class="navbar navbar-inverse 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="#">Project name</a> 
    </div> 
    <div class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#about">About</a></li> 
     <li><a href="#contact">Contact</a></li> 
     </ul> 
    </div><!--/.nav-collapse --> 
    </div> 
</div> 

<div class="container"> 

    <div class="starter-template"> 
    <h1>Bootstrap starter template</h1> 
    <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p> 
    </div> 

</div> 

ответ

3

Этот шаблон содержит padding на body, чтобы избежать перекрытия с фиксированной навигационной панелью.

body { 
    padding-top: 50px; 
} 

Как упоминалось в документации:

набивка тела требуется Фиксированный Navbar будет накладывать свой другой контент, если не добавить отступы в верхней части тела. Попробуйте свои собственные значения или используйте наш фрагмент ниже. Совет. По умолчанию навигационная панель имеет высоту 50 пикселей.

http://getbootstrap.com/components/#navbar-fixed-top

+0

спасибо за ваше оповещение, o отметьте это право, потому что оно имеет наибольшее количество голосов –

0

Добавить в поле CSS на скрипку

.starter-template { 
padding: 40px 15px; 
text-align: center; 
} 

Бутстраповское шаблон использует свой собственный пользовательский файл CSS в то время как ваша скрипка оленья кожа этот файл.

+0

ага, я нашел его. Благодарю. спасибо всем вам –

0

Это потому, что вы используете фиксированный для Yop навигации. Как указано в документации к бутстрапу, вы должны указать padding на body вашей страницы. например

body{ 
padding-top: 20px; 
} 

Цитата http://getbootstrap.com/components/#navbar-fixed-top

«Fixed к началу

Добавить .navbar фиксируемым-топ и не забудьте учесть скрытую область под ним, добавляя по крайней мере 40px дополнения к <body>. Будьте обязательно добавьте это после основного Bootstrap CSS и перед дополнительным отзывчивым CSS ».

+0

Обратите внимание, что вопрос отмечен как bootstrap3, поэтому вы можете включить ссылку на эту версию – DaniP

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