Para eliminar el espacio de medianil para un div específico, primero debemos saber qué es el espacio de medianil. En Bootstrap 4, hay 12 columnas en el sistema de cuadrícula, cada columna tiene un pequeño espacio entre ese espacio que se conoce como espacio de canalón. Gutter Space tiene un ancho de 30 px (15 px en cada lado de una columna). El siguiente enfoque lo explicará claramente.
Acercarse:
- De forma predeterminada, Bootstrap 4 tiene class=”no-gutters” para eliminar los espacios de canaleta de cualquier div específico. La siguiente imagen muestra el espacio de canalón resaltado y el espacio entre columnas en el sistema de cuadrícula de 12 columnas Bootstrap 4. Incluso puede modificar el ancho del canalón reduciendo 15 px el ancho del espacio del canalón entre cada columna.
Ejemplo 1: el siguiente ejemplo ilustra cómo eliminar el espacio de medianera para un div específico.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <center> <div class="container"> <h1 style="color:green;padding:13px;"> GeeksforGeeeks </h1> <br> <div class="row p-3"> <h2><em>With Gutter space</em></h2> </div> <div class="row border border-dark "> <div class="col-12 col-sm-6 col-md-8 bg-primary "> .col-12 .col-sm-6 .col-md-8 </div> <div class="col-6 col-md-4 bg-secondary"> .col-6 .col-md-4 </div> </div> <div class="row p-3"> <h2><em>Without Gutter space</em></h2> </div> <div class="row no-gutters border border-dark"> <div class="col-12 col-sm-6 col-md-8 bg-primary "> .col-12 .col-sm-6 .col-md-8 </div> <div class="col-6 col-md-4 bg-secondary"> .col-6 .col-md-4 </div> </div> </div> </center> </body> </html>
Producción:
Ejemplo 2: el siguiente ejemplo ilustra cómo eliminar el espacio de medianil solo para un div específico.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <center> <div class="container"> <h1 style="color:green;padding:13px;"> GeeksforGeeeks </h1> <br> <div class="container"> <div class= "row no-gutters"> <div class= "col-6 col-sm-3 bg-info"> .col-6 .col-sm-3 </div> <div class= "col-6 col-sm-3 bg-danger"> .col-6 .col-sm-3 </div> <b><em>Without Gutter space</em></b> </div> <div class="row "> <div class= "col-6 col-sm-3 bg-warning"> .col-6 .col-sm-3 </div> <div class= "col-6 col-sm-3 bg-success"> .col-6 .col-sm-3 </div> <b><em>With Gutter space</em></b> </div> <div class= "row no-gutters"> <div class= "col-4 col-sm-2 bg-success"> .col-4 .col-sm-2 </div> <div class= "col-4 col-sm-2 bg-danger "> .col-4 .col-sm-2 </div> <div class= "col-4 col-sm-2 bg-info"> .col-4 .col-sm-2 </div> <b><em>Without Gutter space</em></b> </div> <div class= "row "> <div class= "col-4 col-sm-2 bg-danger"> .col-4 .col-sm-2 </div> <div class= "col-4 col-sm-2 bg-info"> .col-4 .col-sm-2 </div> <div class= "col-4 col-sm-2 bg-warning"> .col-4 .col-sm-2 </div> <b><em>With Gutter space</em></b> </div> </div> </div> </center> </body> </html>
Producción:
Referencia: https://getbootstrap.com/docs/4.3/layout/grid/#no-gutters
Publicación traducida automáticamente
Artículo escrito por VigneshKannan3 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA