0
408
Vistas¿Cómo cambiar dinámicamente el ancho de la columna de arranque de acuerdo con otras columnas?
Digamos que creamos una fila en bootstrap y luego agregamos dos columnas, una para el contenido del blog, en el lado izquierdo (col-sm-7) y otra para la barra lateral (col-sm-5), en el lado derecho lado.
¿Hay alguna manera de hacer que el contenido de col-sm-7 se expanda a col-sm-12 cuando la altura de col-sm-5 es menor que la altura de col-sm-7 (o en otras palabras: cuando no hay contenido en la barra lateral?: digamos que un usuario agrega solo un widget. El problema es que la barra lateral ocupará todo el lado derecho, lo que no se ve bien).
Aquí hay una imagen para mostrar lo que quiero decir:
2 Respuestas
Responde la pregunta0
Como se mencionó, no hay forma de hacer esto con la cuadrícula estándar de Bootstrap. Sin embargo, con algunos ajustes de CSS es posible, siguiendo estas "reglas".
Coloque la barra lateral primero y flote hacia la derecha.
<div class="col-sm-5 pull-right"> .. </div> Haga col-sm-7 width:auto, y desflote..
.float-none { float: none; width: auto; } Finalmente, cualquier DIV secundario dentro de col-sm-7 debe overflow: auto ...
Demostración: http://codeply.com/go/njEg31ZG33
AFAIK, flexbox no funcionaría bien para esto.
0
No puedo ver una manera fácil de hacer esto en bootstrap (tal vez en bootstrap 4 con flexbox...) - ambos conjuntos de contenido están en contenedores muy distintos. Probablemente podría lograrlo con un poco de javascript y algo de CSS, pero no sería recomendable. El código de este ejemplo no está probado.
De todos modos, un método potencial para hacer esto sería poner su barra lateral en la misma columna que el contenido de su blog (eugh) y hacer que cada content col-7 y su sidebar col-5.
En este punto, puede usar jQuery para calcular qué filas deben expandirse a col-12 para llenar el espacio debajo de la barra lateral comparando la altura de la barra lateral (por ejemplo, 400) con la altura de las columnas (por ejemplo, 100 cada una) . De esta forma, sabría que 4 elementos de content suman 400 (la altura de su barra lateral). Esto significa que a partir del cuarto elemento, puede cambiar la clase a col-12.
var contentItems = $(".content"); // your 'content' items var sidebar = $(".sidebar"); var contentItemHeight = $(".content").first().height; var sidebarHeight = $(".sidebar").height; var smallColumns = sidebarHeight / contentItemHeight; // 4 var $i = 1; $.each($contents, function(){ if($i <= smallColumns){ // Next to sidebar $(this).addClass(".col-xs-7"); }else{ // Below sidebar $(this).addClass(".col-xs-12"); } }) // Edited to remove accidental switch to PHP