Agregando espacio entre columnas en Bootstrap 4
Cómo quiero que se vea
Estoy tratando de agregar espacios horizontales y verticales entre las columnas en BS4 pero mantiene los puntos de interrupción (negros o rojos) o los puntos de interrupción de bootstrap. ¿Hay alguna manera fácil de agregar espacio? He probado la nueva configuración de márgenes de BS4, pero en realidad no me ayudó (arruinó el encabezado y el color de fondo). Además, las 2 columnas horizontales deben tener la misma altura.
por cierto Si ejecuta el fragmento, las columnas no se muestran correctamente debido al tamaño de la salida del fragmento. Eso es lo que debería ser en no móvil: captura de pantalla (o expanda el fragmento)
* { color: white; } .black { background-color: black; } .red { background-color: red; } nav { background-color: antiquewhite; margin: 0px; } .row {} .head { background-color: aqua; } HEADING 0 COLUMN aaaa
aaaa
HEADING 1 COLUMNS BLACK bbbb
bbbb
HEADING 2 CLOUMNS RED cccc dddd eeee HEADING 3 COLUMNS BLACK ffff
ffff
HEADING 4 CLOUMNS RED hhhh
- Cómo centrar la barra de navegación en Bootstrap 4 usando Flexbox
- Mostrar líneas de texto largas y completas (listas HTML anidadas) al pasar el mouse sobre html / CSS / angular / bootstrap
- ¿Cómo ajustar automáticamente la altura de la fila en Bootstrap?
- ¿Cómo utilizo las clases de la herramienta de espaciado en Bootstrap 4?
- bootstrap 3 a bootstrap 4 cols ya no están alineados horizontalmente
Para el espaciado, Bootstrap 4 tiene clases de espaciado sensibles p-* (para relleno) y m-* (para márgenes).
Entonces, en su caso, podría experimentar agregando p-1 o tal vez p-2 a todas sus columnas para lograr el efecto deseado.
Nota: Las clases de espaciado de Bootstrap se basan en unidades rem , no en px porque px es la forma antigua y obsoleta de hacer las cosas cuando se trata de un diseño sensible y de accesibilidad.
Aquí está el enlace de referencia para usted:
https://getbootstrap.com/docs/4.0/utilities/spacing/
El siguiente fragmento de código produce el resultado deseado mediante el anidamiento y la clase m-1 para crear márgenes alrededor de las columnas:
HEADING 0 COLUMN aaaa
aaaa
HEADING 1 COLUMNS BLACK bbbb
bbbb
HEADING 2 CLOUMNS RED cccc dddd eeee HEADING 3 COLUMNS BLACK ffff
ffff
HEADING 4 CLOUMNS RED hhhh
- La barra de navegación de Bootstrap 4 a la derecha se alinea con el botón que no se colapsa en el móvil
- Cómo ocultar la barra de navegación plegable Bootstrap 4 al hacer clic
- Bootstrap 4 fila llena la altura restante
- Cambio de icono desplegable en Bootstrap 4
- ¿Cómo centrar elementos de navegación en Bootstrap?
- El diseño de la barra de navegación de Bootstrap 4 funciona con CDN, se rompe con el código descargado
- Extienda un elemento más allá del contenedor de arranque
- ¿Cómo centrar vertical y horizontalmente este texto dentro de las columnas bootstrap4?
- Bootstrap 4 Carousel: intervalo de datos individual en cada diapositiva
- No se puede hacer que la validación funcione en Bootstrap 4
- CSS float-right no funciona en Bootstrap 4 Navbar