Pregunta sobre Advanced Bootstrap Blocks de Wordpress:

Problema con la cuadrícula receptiva

Un usuario preguntó 👇

Hola,

Estoy usando «Advanced Bootstrap Blocks» y tengo que decir que es realmente genial.

Tengo un pequeño problema: cuando creo una fila con varias columnas adentro y uso múltiples clases «col», las clases para teléfonos inteligentes no se respetan.

Pondré parte del código a continuación donde encontraré el problema.


<div class="wp-block-advanced-bootstrap-blocks-row row">
    <!-- wp:advanced-bootstrap-blocks/column {"className":"col-12"} -->
    <div class="wp-block-advanced-bootstrap-blocks-column col-12 col">
		some other code
    </div>
    <!-- /wp:advanced-bootstrap-blocks/column -->

    <!-- wp:advanced-bootstrap-blocks/column {"className":"col-md-4 col-sm-12 mb-5 pb-5 fadeIn"} -->
    <div class="wp-block-advanced-bootstrap-blocks-column col-md-4 col-sm-12 mb-5 pb-5 fadeIn col">
		some other code
    </div>
    <!-- /wp:advanced-bootstrap-blocks/column -->

    <!-- wp:advanced-bootstrap-blocks/column {"className":"col-md-4 col-sm-12 mb-5 pb-5 fadeIn"} -->
    <div class="wp-block-advanced-bootstrap-blocks-column col-md-4 col-sm-12 mb-5 pb-5 fadeIn col">
		some other code
    </div>
    <!-- /wp:advanced-bootstrap-blocks/column -->

    <!-- wp:advanced-bootstrap-blocks/column {"className":"col-md-4 col-sm-12 mb-5 pb-5 fadeIn"} -->
    <div class="wp-block-advanced-bootstrap-blocks-column col-md-4 col-sm-12 mb-5 pb-5 fadeIn col">
		some other code
    </div>
    <!-- /wp:advanced-bootstrap-blocks/column -->

    <!-- wp:advanced-bootstrap-blocks/column {"className":"col-md-4 col-sm-12 mb-5 pb-5 fadeIn"} -->
    <div class="wp-block-advanced-bootstrap-blocks-column col-md-4 col-sm-12 mb-5 pb-5 fadeIn col">
		some other code
    </div>
    <!-- /wp:advanced-bootstrap-blocks/column -->

    <!-- wp:advanced-bootstrap-blocks/column {"className":"col-md-4 col-sm-12 mb-5 pb-5 fadeIn"} -->
    <div class="wp-block-advanced-bootstrap-blocks-column col-md-4 col-sm-12 mb-5 pb-5 fadeIn col">
		some other code
    </div>
    <!-- /wp:advanced-bootstrap-blocks/column -->

    <!-- wp:advanced-bootstrap-blocks/column {"className":"col-md-4 col-sm-12 mb-5 pb-5 fadeIn"} -->
    <div class="wp-block-advanced-bootstrap-blocks-column col-md-4 col-sm-12 mb-5 pb-5 fadeIn col">
		some other code
    </div>
    <!-- /wp:advanced-bootstrap-blocks/column -->

    <!-- /wp:advanced-bootstrap-blocks/column -->
</div>

Trabajando en el html me di cuenta de que soluciono el problema eliminando la «columna» final.

¿Puedes decirme dónde me equivoco? Gracias

(@helpfuldev)

Hace 8 meses, 1 semana

Hola Gian, gracias por los comentarios.

Si comprendo correctamente, ¿necesita que todas estas columnas sean de ancho completo en un teléfono móvil?

Si es así, pruebe el .col-12 clase (y elimine el .col-sm-12 class, ya no es necesario) de cada uno de estos bloques. Aquí hay una vista previa del resultado:
https://www.advancedbootstrapblocks.com/mobile-column-test/

Nota: al utilizar este plugin, .col se aplica una clase a cada bloque «Columna» de forma predeterminada para que no tenga que volver a agregarlo.

El es .col la clase divide cada columna en una columna * flexible * en cada tamaño de pantalla, que crecerá o encogerá dependiendo de su ancho. Poniendo el .col-12 la clase coloca este bloque en una columna de ancho completo en cada resolución de pantalla; el equivalente de Bootstrap 3 es el .col-xs-12 sonó. Luego, puede ajustar el tamaño de la columna para tamaños de pantalla más grandes agregando clases de columna adicionales: col-sm-6 col-md-4 col-lg-3etc.

Por favor, avíseme si he aclarado algo aquí o si tiene alguna pregunta en el futuro.

Saludos, Joe

(@giammo)

Hace 8 meses, 1 semana

Hola Joe, gracias por tu rápida respuesta.

Sí, quiero que las columnas sean de ancho completo en un teléfono móvil. Seguí tu consejo: tomé la clase .col-12 (y eliminé el .col-sm-12) ¡y ahora funciona muy bien!

Estoy muy agradecido por tu trabajo. Muchas gracias.

Mejor atencion. Gian Marco

(@helpfuldev)

Hace 8 meses, 1 semana

Encantado de ayudar, @giammo. ¡Sé bueno!

Joseph

¿Solucionó tu problema??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *