Skip to main content
se eliminaron 2 caracteres en el cuerpo
Origen Enlace
phpMyGuel
  • 14.8k
  • 1
  • 22
  • 38

Estos componentesLas clase .row tienen márgenes negativos que son compensados por los positivos de más que otorga el padrelas clases container o container-fluid. Si no son compensados se produce el desbordamiento que estás experimentando.

Ejemplo sin contenedor:

Si analizas a través del inspector de código de tu navegador, las reglas CSS que aportan dichas clases de Bootstrap, verás rápidamente a lo que me estoy refiriendo.

Estos componentes tienen márgenes negativos que son compensados por los positivos de más que otorga el padre. Si no son compensados se produce el desbordamiento que estás experimentando.

Ejemplo sin contenedor

Si analizas a través del inspector de código de tu navegador, las reglas CSS que aportan dichas clases de Bootstrap, verás rápidamente a lo que me estoy refiriendo.

Las clase .row tienen márgenes negativos que son compensados por las clases container o container-fluid. Si no son compensados se produce el desbordamiento que estás experimentando.

Ejemplo sin contenedor:

Si analizas a través del inspector de código de tu navegador las reglas CSS que aportan dichas clases de Bootstrap, verás rápidamente a lo que me estoy refiriendo.

Origen Enlace
phpMyGuel
  • 14.8k
  • 1
  • 22
  • 38

Te está ocurriendo porque las clases de Bootstrap row, col y container/container-fluid están preparadas para ir de la mano. Un .row debe ser siempre hijo directo de un .container/.container-fluid, al igual que un .col siempre debe serlo de un .row.

Estos componentes tienen márgenes negativos que son compensados por los positivos de más que otorga el padre. Si no son compensados se produce el desbordamiento que estás experimentando.

Ejemplo sin contenedor

.sin-contenedor {
  width: 100%;
  height: 200px;
  background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="row">
  <div class="col-12">
    <div class="sin-contenedor">
      <p>Sin contenedor</p>
    </div>
  </div>
</div>

Ejemplo con contenedor:

.con-contenedor {
  width: 100%;
  height: 200px;
  background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col-12">
      <div class="con-contenedor">
        <p>Con contenedor</p>
      </div>
    </div>
  </div>
</div>

En el primer ejemplo no estoy usando un contenedor, por lo que se produce el desbordamiento, en el segundo ejemplo si lo estoy usando, no produciéndose.

Si analizas a través del inspector de código de tu navegador, las reglas CSS que aportan dichas clases de Bootstrap, verás rápidamente a lo que me estoy refiriendo.