css - 行从超大屏幕中出来

Question

我对使用 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以不同的分辨率查看问题

谢谢

Answer 1

只需删除 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>