Ряды выходят из jumbotron - PullRequest
Новая
       7

Ряды выходят из jumbotron

0 голосов
/ 12 ноября 2018

Я немного новичок в использовании Bootstrap, и у меня возникла проблема с jumbotron, строка класса div превосходит левый край jumbotron

Это пример того, как я это делаю 

<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>

почему текст превышает край jumbotron?что я делаю не так?

Редактировать: codepen чтобы увидеть проблему в другом разрешении

Спасибо

1 Ответ

0 голосов
/ 12 ноября 2018

Просто удалите 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>
...