Podemos mantener la brecha entre las columnas usando CSS normal, pero aquí usaremos el marco Bootstrap para eso. En este artículo, mantendremos un espacio medido entre columnas mediante los siguientes métodos.
Uso de la etiqueta «div»: Simplemente agregando un «div» con relleno entre dos etiquetas «div» da espacio entre el «div».
Ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width,
initial-scale=1,
shrink-to-fit=no"/>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity=
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous" />
<style media="screen">
.a {
padding: 50px;
}
</style>
</head>
<body>
<div class="row">
<div class="col-4 bg-success a">
One of two columns
</div>
<div class="col-4"><!--extra div--></div>
<div class="col-4 bg-danger a">
One of two columns
</div>
</div>
</body>
</html>
Producción:
-
Imagen sin la etiqueta adicional «div»:
-
Imagen con la etiqueta adicional «div»:
Método que utiliza desplazamiento de columnas: la clase de desplazamiento se utiliza para aumentar el margen izquierdo de una columna. La clase col-md-offset-2 mueve col-md-3 3 columnas.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1,
shrink-to-fit=no" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity=
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous" />
<style media="screen">
.a {
padding: 50px;
}
</style>
</head>
<body>
<!--using offset-->
<div class="row">
<div class="col-md-5 bg-success a">geeksforgeeks</div>
<div class="col-md-5 bg-danger offset-2 a">
geeksforgeeks
</div>
</div>
</body>
</html>
¿Escribir código en un comentario? Utilice ide.geeksforgeeks.org , genere un enlace y compártalo aquí.
Publicación traducida automáticamente
Artículo escrito por somsagar2019 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA