Question

我有一个非常简单的示例，将bootstrap jumbotron分成两部分。左侧部分包含一些文本，右侧部分包含图像：

<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>

另见my bootply example。由于某种原因，Jumbotron的背景高度不足以容纳文本和图像。我需要做些什么来解决这个问题？

Answer 1

我测试了这个并且它有效。

您可以编辑您的jumbotron div标记以包含css类容器。

示例：

<div class="jumbotron container">

Answer 2

也许有点晚了，但我相信你的解决方案将是Jumbotron和容器流体

<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>

Answer 3

您可以尝试将其添加到样式表中。

.jumbotron { min-height: 600px; }

此外，您可以像<body class="test">一样为您的身体添加额外的课程并使用此CSS

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

您可以调整min-height以适合您的内容。

Answer 4

它可能只适用于Bootstrap 4，但这解决了我...

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

Answer 5

似乎没有答案是正确的，因为所有容器类都有其他属性，所以最干净的应该是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>

如何获得正确的Bootstrap Jumbotron高度？

5 个答案: