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>

排从巨型飞船出来

1 个答案: