如何在全尺寸的jumbotron中使用bootstrap 4居中显示一些文本，并为div或p容器设置最大宽度

84 阅读 0 评论 56 点赞

我是靠谱客的博主名字长了才好记，这篇文章主要介绍如何在全尺寸的jumbotron中使用bootstrap 4居中显示一些文本，并为div或p容器设置最大宽度，现在分享给大家，希望可以做个参考。

1.首先，确保你已经引入了Bootstrap 4的CSS和JavaScript文件，可以通过以下方式引入：

复制代码

1
2
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>

2.创建一个全尺寸的jumbotron，可以使用以下代码：

复制代码

1
2
3
4
5
<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <!-- 在这里添加你的文本内容 -->
  </div>
</div>

3.居中显示文本，可以使用Bootstrap 4的text-center类，将其应用于文本所在的容器：

复制代码

1
2
3
4
5
<div class="jumbotron jumbotron-fluid">
  <div class="container text-center">
    <!-- 在这里添加你的文本内容 -->
  </div>
</div>

4.设置div或p容器的最大宽度，可以使用Bootstrap 4的mx-auto类和max-width属性，将其应用于容器：

复制代码

1
2
3
4
5
6
7
<div class="jumbotron jumbotron-fluid">
  <div class="container text-center">
    <div class="mx-auto" style="max-width: 600px;">
      <!-- 在这里添加你的文本内容 -->
    </div>
  </div>
</div>

在上述代码中，将最大宽度设置为600px，你可以根据需要进行调整。

这样，你就可以在全尺寸的jumbotron中使用Bootstrap 4居中显示文本，并为div或p容器设置最大宽度了。