twitter-bootstrap 如何获得正确的 Bootstrap Jumbotron 高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24095797/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get the correct Bootstrap Jumbotron height?
提问by Paul Jansen
I have a very simple example of a bootstrap jumbotron split into 2 parts. The left part contains some text, the right part contains an image:
我有一个非常简单的示例，将 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>
See also my bootply example. For some reason the height of the background of the Jumbotron is not large enough to contain the text and the image. What do I need to do to fix this?
另请参阅我的 bootply 示例。由于某种原因，大屏幕背景的高度不够大，无法包含文本和图像。我需要做什么来解决这个问题？
采纳答案by Dinand
Maybe a little late, but I believe your solution will be Jumbotron and container-fluid
也许有点晚了，但我相信您的解决方案将是 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>
回答by Trey Brister
I have tested this and it works.
我已经测试过这个并且它有效。
You can edit your jumbotron div tag to include the css class container.
您可以编辑您的 jumbotron div 标签以包含 css 类容器。
Example:
例子：
<div class="jumbotron container">
回答by Trey Brister
You can try to add this to your stylesheet.
您可以尝试将其添加到样式表中。
.jumbotron { min-height: 600px; }
Also you can add an extra class to your body like <body class="test">and use this CSS
你也可以在你的身体上添加一个额外的类<body class="test">并使用这个 CSS
test.jumbotron { min-height: 600px; }
You can adjust the min-heightto fit your content.
您可以调整min-height以适合您的内容。
回答by C_Lac
It may only apply to Bootstrap 4 but this solved it for me...
它可能只适用于 Bootstrap 4 但这为我解决了它......
<div class="jumbotron-fluid"></div>
回答by Facundo Colombier
seems that no answer is the correct since all the container classes have other properties too so the most clean should be clearfixin this way:
似乎没有答案是正确的，因为所有容器类也有其他属性，所以最干净的应该是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>