0

No quiero mover el contenido de la columna, quiero mover la columna. Tengo estos div cada uno con una columna.

<div id="menuV" class="col-md-1"></div>
<div id="cerrarSesion" class="col-md-11"></div>   

En una ventana se muestran los dos div y todo encaja bien, pero en otra ventana se muestra solo la columna con tamaño 11. Esta columna me gustaría que se desplazara al lado derecho y no en el izquierdo como se queda por defecto.

He intentado hacerle un col-md-offset-1 a la columna de tamaño 11 y cuando aparece sola se muestra bien (Pegada a la derecha) pero cuando están las dos columnas, entonces se monta una encima de la otra

1
  • ¿Podrías añadir más información? No termina de quedar claro por qué en algunas ventanas la columna de ancho 1 se va a mostrar mientras en otras no. Con el código compartido, ambas columnas se mostrarían en los mismos casos (ocupando 12 para menos de md, u ocupando 1/11 para md y superior). ¿A qué te refieres con "En una ventana se muestran los dos div y todo encaja bien, pero en otra ventana se muestra solo la columna con tamaño 11"?
    – Alvaro Montoro
    el 25 may. 2018 a las 11:07

2 respuestas 2

2

Tu problema es simple, el col-md-offset-1, lo utiliza esté el otro div o no esté, es decir, que de los huecos que tiene disponible en una fila siempre se va a desplazar 1 posición, esto quiere decir, que si ocupa 11 de las 12 columnas que utiliza bootstrap, cuando no está el div menu, va a funcionar bien, ya que el div de 11 columnas puede trabajar en 12, la cosa es que cuando el menú sí está, el div de 11 columnas solo tiene 11 columnas para él, en cuanto haces un offset-1, intentará moverse una columna a la derecha, al acabarse el espacio disponible, busca la posición posible más cercana que es al principio de la siguiente fila.

Posible solución:

Comprobar si el div menú existe o es visible (depende hagas tú)

if($("#menuV").length>0 && $("#menuV").css("display")!="none" ){
    $("#cerrarSesion").addClass("col-md-offset-1");
}else{
    //para asegurarse
    $("#cerrarSesion").removeClass("col-md-offset-1");
}

Espero que te haya servido :)

3
  • He puesto jQuery porque si utilizas bootstrap tienes que importar las librerías de jQuery, pero con jsvascript también se podría, aunque se escribe más el 25 may. 2018 a las 10:58
  • Como nota: con Bootstrap no tienes por qué importar las librerías de jQuery, sólo si vas a hacer uso de alguno de los componentes que necesitan JavaScript (p.e. las pestañas o los acordeones, entre otros).
    – Alvaro Montoro
    el 25 may. 2018 a las 11:04
  • @AlvaroMontoro muy cierto, pero no es mala praxis utilizar jquery al usar bootstrap, ya que es mucho más fácil manejar el DOM, al ser sentencias más "intuitivas", por así decirlo, esto unido a que normalmente suele darse el caso de usar bootstrap con jquery :) el 28 may. 2018 a las 6:38
2

Para el tema de columnas, filas y demás puedes echarle un vistazo a Grid system - Bootstrap

Si quieres que las dos columnas se queden en la derecha puedes probar con "justify-content-end".

<div class="row justify-content-end">
  <div id="menuV" class="col-1"></div>
  <div id="cerrarSesion" class="col-11"></div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.