Почему jumbotron не покрывает высоту divs?

Я изучаю бутстрап, и я делаю тестовую страницу, где у меня есть два div внутри jumbotron.Почему jumbotron не покрывает высоту divs?

Обычно jumbotron имеет серый фон, который покрывает все содержимое внутри него, но когда я добавляю эти два divs, jumbotron изменяет высоту до 50px в высоту и не покрывает высоту двух других div, которые я добавлено.

Может ли кто-нибудь объяснить мне, как это исправить?

HTML:

<div class="container"> 
    <div class="jumbotron"> 
     <div class="col-sm-8"> 
      <ul class="rectangle-list"> 
       <li><a href="">List1 </a> 
        <ul> 
         <li><a href="">Element </a> 
          <ul> 
           <li><a href="">Element</a> </li> 
           <li><a href="">Element</a> </li> 
           <li><a href="">Element</a> </li> 
          </ul> 
         </li> 
         <li><a href="">Element</a> 
          <ul> 
           <li><a href="">Element</a></li> 
           <li><a href="">Element</a></li> 
          </ul> 
         </li> 
        </ul> 
       </li> 
      </ul> 
     </div> 

     <div class="col-sm-4"> 

      <img src="images/image.jpeg" class="img-responsive"/> 
      <img src="images/image.jpeg" class="img-responsive"/> 
     </div> 

    </div> 

    <div class="col-sm-12"> 
     <a href="#" class="btn btn-warning "><span class="glyphicon glyphicon-eye-open"></span> Button</a> 
    </div> 
</div>

With one column

With two columns

На втором изображении вы можете увидеть, как серый контейнер становится маленьким.

источник

2015-04-22 emp233

Вы закрываете тег неправильно. Проверьте свои закрывающие теги ul и li – Choma

Я изменил их, но все тот же. – emp233

Код, который вы опубликовали, в порядке, как вы можете видеть в [этой скрипке] (https://jsfiddle.net/u7cxf8tc/). Проблема, вероятно, в вашем пользовательском css. – Choma

Я понял!

На начальной загрузке коллектив- дивов должен быть вложен внутрь <div class='row'>

Заключительного кода:

HTML:

<div class="container"> 
    <div class="jumbotron"> 
    <div class="row"> 
     <div class="col-sm-8"> 
      <ul class="rectangle-list"> 
       <li><a href="">List1 </a> 
        <ul> 
         <li><a href="">Element </a> 
          <ul> 
           <li><a href="">Element</a> </li> 
           <li><a href="">Element</a> </li> 
           <li><a href="">Element</a> </li> 
          </ul> 
         </li> 
         <li><a href="">Element</a> 
          <ul> 
           <li><a href="">Element</a></li> 
           <li><a href="">Element</a></li> 
          </ul> 
         </li> 
        </ul> 
       </li> 
      </ul> 
     </div> 

     <div class="col-sm-4"> 

      <img src="images/image.jpeg" class="img-responsive"/> 
      <img src="images/image.jpeg" class="img-responsive"/> 
     </div> 
     </div> 
    </div> 

    <div class="col-sm-12"> 
     <a href="#" class="btn btn-warning "><span class="glyphicon glyphicon-eye-open"></span> Button</a> 
    </div> 
</div>

источник

2015-04-22 01:09:09 emp233

Почему jumbotron не покрывает высоту divs?

ответ

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