Saltar al contenido

Diseño Bootstrap 4 con una columna fija de ancho

Si te encuentras con algo que te causa duda puedes comentarlo y te responderemos lo más rápido posible.

Solución:

Hay una solución integrada en bootstrap 4.

Prueba esto;

content
sidebar

Demostración: https://www.bootply.com/WiegnnJbxX

@Denis Stephanov, puede crear un elemento flexible que no se encoja ni crezca y tenga un ancho fijo, con la siguiente regla css:

.flex-fixed-width-item 
    flex: 0 0 100px;

Esta es la abreviatura de flex-grow, flex-shrinky flex-basis. Puede leer más sobre estas propiedades en este artículo de CSS-Tricks.

Agregar esa clase a su columna de ancho fijo:

fixed 100px
...

Luego, manteniendo la relación de columna igual:

  ...
  
2
4
2

Obtendrá el resultado solicitado, que puede ver en este proyecto de codeply.

Bootstrap 4 tiene esto integrado en sus componentes de diseño.

Referencia: https://getbootstrap.com/docs/4.0/layout/grid/#setting-one-column-width

Si desea que su columna de ancho establecido tenga un ancho de píxel fijo, puede omitir .col-4 y agregue una clase de ancho de píxel personalizado.

// style.css .col-pixel-width-100 flex: 0 0 100px;

Nos encantaría que puedieras mostrar esta noticia si si solucionó tu problema.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

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