使用 Bootstrap 将列更改为行布局
Changing columns to rows layout with Bootstrap
早上好!
我正在做一个有 4 列的布局。在这 4 列中,首先是图像,就在您的标题和描述下方。这方面必须保持在桌面和平板电脑模式。此时我没有问题
代码:http://www.bootply.com/Sv6rAEA9Jz
当移动模式发生变化时,你原来的 4 列必须变成 1 列 4 行。示例:
图片必须是左右描述。
我不知道如何在移动模式下执行此操作
有人可以帮助我吗?
来自西班牙的问候
你可以试试下面的方法
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="col-sm-12 col-xs-4">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Skype.svg/256px-Skype.svg.png" alt="image1" class="img-responsive" style="min-width: 128px; max-width: 128px;">
</div>
<div class="col-sm-12 col-xs-8">
<h3>Heading</h3>
<p>Description about the image goes here</p>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="col-sm-12 col-xs-4">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Skype.svg/256px-Skype.svg.png" alt="image1" class="img-responsive" style="min-width: 128px; max-width: 128px;">
</div>
<div class="col-sm-12 col-xs-8">
<h3>Heading</h3>
<p>Description about the image goes here</p>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="col-sm-12 col-xs-4">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Skype.svg/256px-Skype.svg.png" alt="image1" class="img-responsive" style="min-width: 128px; max-width: 128px;">
</div>
<div class="col-sm-12 col-xs-8">
<h3>Heading</h3>
<p>Description about the image goes here</p>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="col-sm-12 col-xs-4">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Skype.svg/256px-Skype.svg.png" alt="image1" style="min-width: 128px; max-width: 128px;">
</div>
<div class="col-sm-12 col-xs-8">
<h3>Heading</h3>
<p>Description about the image goes here</p>
</div>
</div>
</div>
</div>
这样试试:Demo
在每个 col-**-**
之后,尝试添加 row div
以使您的内容与此处添加的代码一起得到充分扩展
<div class="col-md-3 col-sm-12 col-xs-12">
<div class="cajaContenido col-sm-12">
<div class="imagenContenido col-xs-6 col-sm-6 col-md-12">
<img class="img-responsive" src="http://hdwallpaperspretty.com/wp-content/gallery/hd-background-1920x1080/1920x1080%20Wallpaper%20128.jpg" id="yui_patched_v3_11_0_1_1456387393358_870">
</div>
<div class="textoContenido col-xs-6 col-sm-6 col-md-12">
<div class="contenidoUr">
<h5>ESTUDIOS DE GRADO</h5>
<p>Estudios y proyectos en la cuna del rioja</p>
</div>
</div>
</div>
</div>
早上好!
我正在做一个有 4 列的布局。在这 4 列中,首先是图像,就在您的标题和描述下方。这方面必须保持在桌面和平板电脑模式。此时我没有问题
代码:http://www.bootply.com/Sv6rAEA9Jz
当移动模式发生变化时,你原来的 4 列必须变成 1 列 4 行。示例:
图片必须是左右描述。
我不知道如何在移动模式下执行此操作
有人可以帮助我吗?
来自西班牙的问候
你可以试试下面的方法
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="col-sm-12 col-xs-4">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Skype.svg/256px-Skype.svg.png" alt="image1" class="img-responsive" style="min-width: 128px; max-width: 128px;">
</div>
<div class="col-sm-12 col-xs-8">
<h3>Heading</h3>
<p>Description about the image goes here</p>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="col-sm-12 col-xs-4">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Skype.svg/256px-Skype.svg.png" alt="image1" class="img-responsive" style="min-width: 128px; max-width: 128px;">
</div>
<div class="col-sm-12 col-xs-8">
<h3>Heading</h3>
<p>Description about the image goes here</p>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="col-sm-12 col-xs-4">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Skype.svg/256px-Skype.svg.png" alt="image1" class="img-responsive" style="min-width: 128px; max-width: 128px;">
</div>
<div class="col-sm-12 col-xs-8">
<h3>Heading</h3>
<p>Description about the image goes here</p>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="col-sm-12 col-xs-4">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Skype.svg/256px-Skype.svg.png" alt="image1" style="min-width: 128px; max-width: 128px;">
</div>
<div class="col-sm-12 col-xs-8">
<h3>Heading</h3>
<p>Description about the image goes here</p>
</div>
</div>
</div>
</div>
这样试试:Demo
在每个 col-**-**
之后,尝试添加 row div
以使您的内容与此处添加的代码一起得到充分扩展
<div class="col-md-3 col-sm-12 col-xs-12">
<div class="cajaContenido col-sm-12">
<div class="imagenContenido col-xs-6 col-sm-6 col-md-12">
<img class="img-responsive" src="http://hdwallpaperspretty.com/wp-content/gallery/hd-background-1920x1080/1920x1080%20Wallpaper%20128.jpg" id="yui_patched_v3_11_0_1_1456387393358_870">
</div>
<div class="textoContenido col-xs-6 col-sm-6 col-md-12">
<div class="contenidoUr">
<h5>ESTUDIOS DE GRADO</h5>
<p>Estudios y proyectos en la cuna del rioja</p>
</div>
</div>
</div>
</div>