Navigation überspringen

[Gelöst] Hacer un loop responsive

This support ticket is created vor 2 Jahren, 4 Monaten. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Hong_Kong (GMT+08:00)

Dieses Thema enthält 1 Antwort, hat 2 Stimmen.

Zuletzt aktualisiert von Luo Yang vor 2 Jahren, 4 Monaten.

Assistiert von: Luo Yang.

Author
Artikel
#2462291

Hola Nigel, tengo este loop de 4 columnas, como debería hacer para que sea responsive y pase de 4 columnas a dos columnas y a una columna en la versión móvil.
Se debería modificar el bucle o lo tengo de hacer por CSS.

Saludos.
Rafa Corts

<wpv-loop wrap="4" pad="true">
		[wpv-item index=1]
		<div class="row ">
			<div class="col-md-3">[wpv-post-body view_template="loop-item-in-todos-los-proyectos"]</div>
		[wpv-item index=2]
			<div class="col-md-3">[wpv-post-body view_template="loop-item-in-todos-los-proyectos"]</div>
		[wpv-item index=3]
			<div class="col-md-3">[wpv-post-body view_template="loop-item-in-todos-los-proyectos"]</div>
		[wpv-item index=4]
			<div class="col-md-3">[wpv-post-body view_template="loop-item-in-todos-los-proyectos"]</div>
		</div>
		[wpv-item index=pad]
			<div class="col-md-3"></div>
		[wpv-item index=pad-last]
			<div class="col-md-3"></div>
	</wpv-loop>
#2462703

Hello,

Since you are using Bootstrap grid system, you can follow Booststrap document to setup the CSS class name:
versteckter Link

For example:

<div class="col-md-3 col-sm-6">...</div>

The CSS class name "col-sm-6" will display two columns grid in small device.