Jumbotron 大小调整

Jumbotron 是 Bootstrap 中的一个组件，通常用于在页面中突出显示主要内容。默认情况下，Jumbotron 具有固定的大小。但是，有时您可能需要调整 Jumbotron 的大小以更好地适应您的页面。本文将介绍如何调整 Jumbotron 的大小。

调整 Jumbotron 的宽度

要调整 Jumbotron 的宽度，您可以为其添加一个自定义的 CSS 类。例如，您可以使用以下 CSS 代码将 Jumbotron 的宽度设置为 80%：

.custom-jumbotron {
  width: 80%;
}

然后，在 Jumbotron 中添加这个 CSS 类：

<div class="jumbotron custom-jumbotron">
  <h1>Hello, world!</h1>
  <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

这将使 Jumbotron 的宽度为其父元素的 80%。

调整 Jumbotron 的高度

要调整 Jumbotron 的高度，您可以将其包装在一个包含所需高度的容器中。例如，您可以使用以下 HTML 代码将 Jumbotron 的高度设置为 500 像素：

<div class="jumbotron" style="height: 500px;">
  <h1>Hello, world!</h1>
  <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

这将使 Jumbotron 的高度为 500 像素。

总结

调整 Jumbotron 的大小非常简单，只需要添加自定义的 CSS 类或包装在一个包含所需高度的容器中即可。这使您可以更好地控制 Jumbotron 的大小，以便更好地适应您的页面。

以上就是如何调整 Jumbotron 大小的介绍。