Estoy tratando de mostrar divs uno al lado del otro en una página. Sin embargo, si solo hay una clase div col-xs-12 col-md-6 en la página, estoy tratando de mostrarla a todo lo ancho (100%) en lugar de 50%. Actualmente está usando solo el 50% incluso si solo hay un col-xs-12 col-md-6 . El HTML proviene de MVC, por lo que este HTML está arreglado. ¿Hay alguna manera de hacer esto usando CSS o JavaScript/jQuery? Estaba pensando que el siguiente javascript (a continuación) funcionará, pero no es así.
Aquí está mi HTML y CSS:
<div class="col-xs-12 col-md-6 textcontent"> </div> <div class="col-xs-12 col-md-6 service"> </div> <div class="col-xs-12 col-md-6 textcontent"> </div>CSS
.col-md-6{ width50%; }JavaScript
if ($('.col-xs-12.col-md-6').length == 1) { $('.col-xs-12.col-md-6').toggleClass(".col-xs-12.col-md-12") }Lo que realmente necesita hacer en JavaScript es eliminar la clase " col-md-6 ".
if ($('.col-xs-12.col-md-6').length == 1) { $('.col-xs-12.col-md-6').removeClass("col-md-6") } El .col-xs-12 se aplica a todos los tamaños de pantalla a partir de xs y se anula con .col-md-6 para el tamaño de pantalla md y superior. Entonces, simplemente evita que ocurra la anulación eliminando la clase.
Lamento que estés bloqueado en Bootstrap. Esto podría hacerse fácilmente con Flexbox. Al abordar su pregunta específica y el código que publicó, solo hay un pequeño error con su cambio de clase.
if ($('.col-xs-12.col-md-6').length == 1) { $('.col-xs-12.col-md-6').toggleClass("col-xs-12 col-md-12"); }Al agregar los nombres de las clases, no desea agregar el " . " y desea que los nombres de las clases estén separados tal como aparecen en el HTML. Lo que estabas haciendo era intentar agregar class=" .col-xs-12.col-md-12" en lugar de class=" col-xs-12 col-md-12" .
Supongo que dado que está usando Bootstrap, tampoco necesitará esa definición css para .col-md-6, ya que Bootstrap ya debería tenerla definida para usted.
El sistema de cuadrícula Bootstrap se basa en un modelo de 12 columnas. Simplemente puede usar col-12 para decir que una columna llena todo el ancho del contenedor.
Prueba esto:
<div class="col-12 textcontent"> </div> <div class="col-12 service"> </div> <div class="col-12 textcontent"> </div>Aquí la documentación sobre el sistema de cuadrícula con arranque y puntos de interrupción si desea aplicar una configuración de columna diferente según el ancho de la pantalla del dispositivo.