Бутстрап 3 див над жумботроном

Я использую Bootstrap 3, и у меня проблема с получением div, чтобы сидеть над заголовком jumbotron. Я использую класс jumbotron для создания полноразмерного адаптивного заголовка с фоновым изображением, как показано ниже...

<div class="container-fluid">
<div class="jumbotron">
    <div class="container">
        <div class="row">
        <div class="col-md-8">text here</div>
        <div class="col-md-4">text here</div>
        </div>
    </div>
</div>

Вот остальная часть сайта...

 <div class="container">rest of site goes here
 </div>

То, что я хочу сделать, это иметь весь мой сайт / контейнер НИЖЕ jumbotron - скользить вверх и покрывать половину его высоты. Очевидно, что как есть, контейнер для содержимого сайта очищается ниже jumbotron, но мне нужно решение, чтобы увеличить его примерно на 100px, чтобы покрыть нижнюю половину jumbotron.

Я пробовал оба метода z-index и абсолютное позиционирование, но не могу заставить их работать. Какие-либо предложения?

ОБРАЗЕЦ ДЛЯ РАБОТЫ ЗДЕСЬ - http://jsfiddle.net/9b9Da/7/

Источник

2 ответа

Решение

Как указано в комментариях, Bootstrap 3 не имеет .container-fluid класс, который был удален в Bootstrap 2.3.2 как .rows по умолчанию полная ширина (подход Mobile first). position: relative Затем был использован для компенсации вашего основного контента <div> появиться на полпути над .jumbotron

<div class="jumbotron">
     <div class="col-md-8 jumbotext">text here</div>
     <div class="col-md-4 jumbotext">text here</div>
</div>
<div class="container" id="content">
    <div class="row">
        This content needs to float over the Jumbotron above
    </div>
</div>

<style>
    #content {
       position: relative;
       bottom: 80px;
       z-index: 500;
       opacity: 0.6;
   }

   #content > .row {
       min-height: 400px;
       background: #cccccc;
   }

   .jumbotron > .jumbotext {
       z-index: 700;
   }
</style>

Скрипка: http://jsfiddle.net/9b9Da/9/

Источник

Я использую загрузчик 3, и у него есть.container-жидкость. Он также указан в документации по начальной загрузке и на W3.

Bootstrap классы

Источник
Другие вопросы по тегам