Как получить правильную высоту Jumbotron Bootstrap?

У меня есть очень простой пример загрузочный экран разделен на 2 части. Левая часть содержит текст, правая часть содержит изображение:

<div class="jumbotron">
  <div class="col-md-8"><h1><b>My WebSite Jumbotron!</b></h1>
    <p>This page would be great if the jumbotron would be higher.</p>
  </div>
  <div class="col-md-4">
    <img src="//placehold.it/300" class="img-responsive">
  </div>
</div>

см. также мой пример bootply. По какой-то причине высота фона Jumbotron недостаточно велика, чтобы содержать текст и изображение. Что мне нужно сделать, чтобы исправить это?

9
twitter-bootstrap

5 ответов

может быть, немного поздно, но я считаю, что ваше решение будет Jumbotron и container-fluid

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron container-fluid">
<div style="clear:both;">
  Curabitur a felis in nunc fringilla tristique. Vivamus euismod mauris. Aenean massa. Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula. Proin magna. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor.

Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Aliquam lobortis. Ut tincidunt tincidunt erat. Nulla porta dolor.

Quisque id mi. Nunc nonummy metus. Nullam quis ante. Vivamus aliquet elit ac nisl.
  </div>
  <br/>
<div style="clear:both;">
  Curabitur a felis in nunc fringilla tristique. Vivamus euismod mauris. Aenean massa. Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula. Proin magna. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor.

Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Aliquam lobortis. Ut tincidunt tincidunt erat. Nulla porta dolor.

Quisque id mi. Nunc nonummy metus. Nullam quis ante. Vivamus aliquet elit ac nisl.
  </div>
4

Я испытал это, и это работает.

вы можете изменить свой тег jumbotron div, чтобы включить контейнер класса css.

пример:

<div class="jumbotron container">
8

вы можете попробовать добавить это в таблицу стилей.

.jumbotron { min-height: 600px; }

также вы можете добавить дополнительный класс к своему телу, как <body class="test"> и используйте этот CSS

test.jumbotron { min-height: 600px; }

вы можете отрегулировать min-height чтобы соответствовать ваш контент.

3

Это может применяться только к Bootstrap 4, но это решило его для меня...

<div class="jumbotron-fluid"></div>
0

Кажется, что нет правильного ответа, так как все классы контейнеров имеют другие свойства, поэтому наиболее чистым должно быть clearfix таким образом:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron clearfix">
  <div class="col-md-8"><h1><b>My WebSite Jumbotron!</b></h1>
<p>This page would be great if the jumbotron would be higher.</p>
  </div>
  <div class="col-md-4">
<img src="//placehold.it/300" class="img-responsive">
  </div>
</div>
0