如何解决Jumbotron无法正确居中
因此,我在最新的Bootstrap 4.5.2中使用了jumbotron,并将<p>
标签放在3列中并使其居中。但是之后,我注意到最后一列(第三列)右侧的空间小于第一列(左侧)的空间,这意味着它没有完全居中。我尝试使用padding
,但看起来还是一样。
.jumbotron {
background: black;
color: white;
text-align: center;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="jumbotron jumbotron-fluid">
<div class="container">
<div class="row">
<div class="col">
<p>
Gravida dis placerat lectus ante vel nunc euismod est turpis sodales. Diam tempor dui lacinia accumsan vivamus. Gravida dis placerat lectus ante vel nunc euismod est turpis sodales. Diam tempor dui lacinia accumsan vivamus.
</p>
</div>
<div class="col">
<p>
Gravida dis placerat lectus ante vel nunc euismod est turpis sodales. Diam tempor dui lacinia accumsan vivamus. Gravida dis placerat lectus ante vel nunc euismod est turpis sodales. Diam tempor dui lacinia accumsan vivamus.
</p>
</div>
<div class="col">
<p>
Gravida dis placerat lectus ante vel nunc euismod est turpis sodales. Diam tempor dui lacinia accumsan vivamus. Gravida dis placerat lectus ante vel nunc euismod est turpis sodales. Diam tempor dui lacinia accumsan vivamus.
</p>
</div>
</div>
</div>
</div>
解决方法
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。