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
- Mostrar u ocultar el icono de intercalación en el menú desplegable de bootstrap4 basado en el menú desplegable presente o no
- Cómo enlazar productos dinámicamente en un carrusel de fragmentos en Angular4
- Bootstrap NavBar con elementos alineados a la izquierda, centro o derecha
- Modal cubriendo toda la pantalla del dispositivo
- Deshabilitar una sola fecha en p-calendar
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
- Bootstrap4 modal no funciona en dispositivos móviles y tabletas
- cómo hacer una fila completa en una tabla que se puede hacer clic como un enlace?
- ¿Cómo colocar la barra de navegación debajo de la barra de navegación pegajosa usando bootstrap 4?
- Cambiar la clase activa en la barra de navegación del bootstrap no permanece en la plantilla de Django heredada
- Limite la imagen, el título y la altura de la historia en cardview
- Cómo eliminar el espacio de la canaleta solo para un div específico – bootstrap
- Elementos de clase de círculo circular bootstrap con borde y relleno
- ¿Cómo centrar esta forma en Bootstrap 4?
- Cómo centrar el logotipo de la barra de navegación en Boostrap 4 con los enlaces de navegación a continuación
- Verticalmente centra el texto en el carrusel Bootstrap
- Bootstrap 4 – Mover enlaces a la derecha de la barra de navegación con un botón de alternar