css - 这些行是从超大型飞机出来的

我使用Bootstrap有点陌生，并且巨型机出现问题，div类行超过了巨型机的左边缘

这是我做事的一个例子

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container-fluid">
  <div class="jumbotron jumbotron-fluid mt-2 pt-4">

    <div class="row">
      <h4>Simple Title</h4>
    </div>

    <div class="row">
      <p class="lead">El transformador se encuentra <span class="badge badge-success">APROBADO</span></p>
    </div>

    <div class="row">
      <p class="small">Last revision: 12-11-2018</p>
    </div>
  </div>
</div>

为什么文本超出了超大屏幕的边缘？
我究竟做错了什么？

编辑：codepen以查看不同分辨率的问题

谢谢

最佳答案

只需删除jumbotron-fluid类

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container-fluid">
  <div class="jumbotron mt-2 pt-4">

    <div class="row">
        <h4>Simple Title</h4>
    </div>

    <div class="row">
      <p class="lead">El transformador se encuentra <span class="badge badge-success">APROBADO</span></p>
    </div>

    <div class="row">
      <p class="small">Last revision: 12-11-2018</p>
    </div>
  </div>
</div>

关于css - 这些行是从超大型飞机出来的，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53262404/