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>

解决方法

没有错,这就是我的看法。

Result

整页:

enter image description here

这是来自开发人员工具的信息:

result

另一个结果:

result