Saltar al contenido

cómo ocultar una columna de la cuadrícula en la versión móvil de bootstrap

Solución:

Dado que está ocultando la segunda columna en “xs”, puede usar el ancho completo para la primera columna definiendo la clase “col-xs-12” en column1.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-xs-12 col-sm-9">
    <p class="testimonial-about">"We have managed to received good number of applications through MyJobs in comparison to advertising in the newspaper and would recommend MyJobs to other companies to assist with their recruitment needs"</p>
  </div>
  <div class="col-sm-3 center-image hidden-xs"><img src="myimage.png"/></div>
</div>

Desde Bootstrap V4 el hidden-X Se han eliminado las clases. Para ocultar una columna según el ancho de la columna, utilice d-none d-X-block. Básicamente, simplemente apaga la visualización del tamaño que desea ocultar y luego configura la visualización del tamaño más grande.

  • Oculto en todo .d-ninguno
  • Oculto en xs .d-none .d-sm-block
  • Oculto en sm .d-sm-none .d-md-block
  • Oculto en md .d-md-none .d-lg-block
  • Oculto en lg .d-lg-none .d-xl-block
  • Oculto en xl .d-xl-none

Tomado de esta respuesta.

Si está utilizando bootstrap 4 y / o desea ocultar una columna en cualquier otra cosa que no sea una vista extra pequeña, así es como:

Bootstrap 3:

<div class="row">
  <div class="col-lg-12 col-xl-9">       
  </div>
  <div class="col-xl-3 hidden-lg hidden-md hidden-sm hidden-xs">
  </div>
</div>

en otras palabras, debe definir cada tamaño de ventana gráfica predefinida individual en la que desea que se oculte la columna.

Bootstrap 4: (un poco menos redundante)

<div class="row">
  <div class="col-lg-12 col-xl-9">       
  </div>
  <div class="col-xl-3 hidden-lg-down">
  </div>
</div>

Además, si desea ocultar una columna si la pantalla es demasiado grande:

<div class="row">
  <div class="col-md-12 col-sm-9">       
  </div>
  <div class="col-sm-3 hidden-md-up">
  </div>
</div>

también tenga en cuenta que col-xs-[n] ha sido reemplazado por col-[n] en bootstrap 4

¡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 *