Как сделать Bootstrap Carousel оставаться неподвижным прямо под навигационной панелью?

Question

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

Код:

<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
    <div class="container"> 
    <ol class="carousel-indicators"> 
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
     <li data-target="#myCarousel" data-slide-to="1"></li> 
     <li data-target="#myCarousel" data-slide-to="2"></li> 
     <li data-target="#myCarousel" data-slide-to="3"></li> 
    </ol> 


    <div class="carousel-inner"> 
     <div class="item active"> 
     <img src="/images/p51blueprint.jpg" alt="P-51" width="100%"> 

     </div> 
     <div class="item"> 
     <img src="/images/f-18-hornet.jpg" alt="F-18" width="100%"> 

     </div> 
     <div class="item"> 
     <img src="/images/p51blackandwhite.jpg" alt="P-51" width="100%"> 

     </div> 
     <div class="item"> 
     <img src="/images/B-52-Stratofortress-infographic.jpg" alt="B-52" width="100%"> 

     </div> 
    </div> 
    </div> 

    <!-- Control arrows --> 
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
    <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
    <span class="sr-only">Next</span> 
    </a> 


</div> 

Answer 1

навигационной панели было известно, чтобы покрыть содержание сайта, чтобы изменить отступы для тела затем использовать запросы средств массовой информации, чтобы изменить отступы тела тоже для разного размера. Что-то вроде строк:

body { 
    padding-top: 70px; 
} 
@media screen and (min-width:768px) and (max-width:990px) { 
    body { 
    margin-top:100px; 
    } 
} 
@media screen and (min-width:991px) and (max-width:1200px) { 
    body { 
    margin-top:70px; 
    } 
}