Bootstrap Navbar поверх карусели

Возникла небольшая проблема с позиционированием моей панели навигации. У меня панель навигации такая, как мне хотелось бы (слегка отделена от верха, как в этом примере: http://getbootstrap.com/examples/carousel/), но картинки в моей карусели заканчиваются ниже панели навигации.

Я хотел бы, чтобы изображения в моей карусели простирались до самого верха страницы, а панель навигации перекрывала верхнюю часть карусели (как в примере выше). Я поиграл с отступами, но самое высокое, что я могу сделать, чтобы изображения карусели расширялись, - это нижняя часть навигационной панели. Ниже я прикрепил фрагменты кода для панели навигации, карусели и карусели css. Буду признателен за любую помощь, заранее спасибо

Код для навигации:

<div class="container">
  <div class="navbar navbar-inverse" role="navigation">  <!navbar-inverse is black, navbar-default is grey>


    <div class="navbar-header">
      <button type="button" class="navbar-toggle" 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">Derby Days 2014</a>
    </div>

    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Donate</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Events <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Penny Wars</a></li>
            <li><a href="#">Wonderful Wednesday</a></li>
            <li><a href="#">Lip Sync</a></li>
            <li><a href="#">Concert</a></li>
          </ul>
        </li>
        <li><a href="#">FAQ</a></li>
      </ul>
    </div><!--/.nav-collapse -->
   </div>
</div>

Код для карусели:

CSS-код для карусели:

.carousel {position: relative;}

.carousel-inner {position: relative; width: 100%; overflow: hidden;}

carousel twitter-bootstrap twitter-bootstrap-3 navbar
person Caleb Addington    schedule 16.01.2014    source источник

Ответы (6)


arrow_upward
9
arrow_downward

Я считаю, что это то, чего вы пытаетесь достичь?

Js Fiddle

.bannerContainer {
    position:relative;     
}
.carousel {
    position:absolute;
    top:0;    
}
.navbar {
    position:absolute;
    top:30px;
    z-index:10;
    background:#fff;
    width:100%;
}

Вы хотите обернуть div с абсолютным позиционированием (nav и carousel) в div, который является относительным.

person Jamie Collingwood    schedule 17.01.2014
comment
Большой! Не забудьте проверить это как ответ. - person Jamie Collingwood; 20.01.2014
comment
@CalebAddington, пожалуйста, отметьте это как ответ, если это помогло. - person galdin; 24.02.2015

arrow_upward
6
arrow_downward

Вы можете переопределить существующий загрузочный css с помощью этого, вы можете использовать position:fixed или position:absolute

.navbar{
      position:absolute;
      width:100%;
      z-index:10;
      max-width:100%;
}

Вот пример рабочего кода

person Nikhil Raj A    schedule 02.05.2017

arrow_upward
2
arrow_downward

// Чтобы панель навигации располагалась поверх карусели.

.navbar {
position:absolute
}

// Чтобы центрировать изображение и добавить немного отступа над ним, чтобы компенсировать навигационную панель.

.carousel-inner > .item > img {
    margin: 0 auto;
    padding-top: 50px;
}

По крайней мере, у меня сработало, так что надеюсь, это поможет вам (и другим). Ваше здоровье.

person Some Guy    schedule 24.09.2015
comment
Я пытался сделать так, чтобы мое собственное раскрывающееся меню навигации появлялось над каруселью (покрывая часть содержимого карусели). position:absolute вместе с достаточно большим z-индексом - вот что сделало это для меня. Спасибо @SomeGuy! - person justian17; 03.01.2017

arrow_upward
0
arrow_downward

В связанном примере они использовали обертку вне nav .navbar-wrapper с абсолютным размещением и верхним полем 20 пикселей (когда ширина области просмотра больше 768 пикселей).

Вот код, который они использовали, чтобы заставить его работать:

.navbar-wrapper {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   z-index: 20;
}

.navbar-wrapper .container {
   padding-left: 0;
   padding-right: 0;
}

.navbar-wrapper .navbar {
   padding-left: 15px;
   padding-right: 15px;
}

@media (min-width: 768px) {
  .navbar-wrapper {
    margin-top: 20px;
  }
}
person denoise    schedule 17.01.2014

arrow_upward
0
arrow_downward

вот что сработало для меня:

  1. Поместите карусель в раздел и сделайте ее абсолютной

  2. Сделать навигационную панель тоже абсолютной

         <section id="home">
          <div id="carouselExampleIndicators" class="carousel slide" data- 
          ride="carousel">....
    </section>
     //the navbar
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top  mynav" >... 
    </nav>

////////CSS

.mynav{
    position: absolute;
  }
.home{
    position: absolute;
}
person Eljeddi Oussema    schedule 01.09.2018

arrow_upward
0
arrow_downward

Просто поместите класс fixed-top внутри вашего тега <nav>, и это должно сработать.

Это выглядит так

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
person ANYTHING HERE    schedule 02.09.2020