Bootstrap 怎么让图片在移动端多列显示而不是一列

香郭 2018-03-07 09:26:13



<div class="container">

    <div class="row">

        <div class="col-xl-12 text-center">

            <img src="http://iph.href.lu/180x180"  class="img-responsive" alt="">

            <img src="http://iph.href.lu/180x180"  class="img-responsive" alt="">

            <img src="http://iph.href.lu/180x180"  class="img-responsive" alt="">

            <img src="http://iph.href.lu/180x180"  class="img-responsive" alt="">

        </div>

    </div>

</div>

在桌面端是是这样的效果：

在移动端是这样：

如何让她实现这样的布局：

就是四个图片在电脑端是居中一排四个，移动端是在首屏底部分俩列俩行四个图片。

...全文

1241 4 打赏收藏转发到动态举报

写回复

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

ldm-smile 2018-03-08

打赏
举报

回复

<div class="container"> <div class="row"> <div class="col-xl-12 text-center"> <img src="http://iph.href.lu/180x180" class="img-responsive col-xs-6" alt=""> <img src="http://iph.href.lu/180x180" class="img-responsive col-xs-6" alt=""> <img src="http://iph.href.lu/180x180" class="img-responsive col-xs-6" alt=""> <img src="http://iph.href.lu/180x180" class="img-responsive col-xs-6" alt=""> </div> </div> </div>

天空影 2018-03-08

打赏
举报

回复

引用 2 楼 wki2012 的回复:

[quote=引用 1 楼 jx950915 的回复:] col-xs-12 12是一行在小屏幕下你设置成col-xs-6即可在移动端显示成你想显示的

麻烦能否具体点，刚刚开始学，有点犯浑[/quote] 你把你代码中的col-xs-12改为 col-xs-6即可

香郭 2018-03-08

打赏
举报

回复

引用 1 楼 jx950915 的回复:

col-xs-12 12是一行在小屏幕下你设置成col-xs-6即可在移动端显示成你想显示的

麻烦能否具体点，刚刚开始学，有点犯浑

天空影 2018-03-08

打赏
举报

回复

col-xs-12 12是一行在小屏幕下你设置成col-xs-6即可在移动端显示成你想显示的

Mao10CMS是基于Thinkphp和Bootstrap开发的免费开源PHP建站系统，适用于搭建各种小型商城、购物分享、社区以及企业网站。当然，您也可以用它来做一个简单的博客。简单易用是Mao10CMS一直追求的目标，在这里没有繁琐杂乱的后台，没有晦涩难懂的设置，您需要做的只是从安装到使用，然后把一切精力专注于内容建设上！再次感谢大家对Mao10CMS的支持！Mao10CMS V2.4主要更新内容：商品模块功能增强，每个商品可自定义参数。屏蔽IP功能，可以屏蔽不受欢迎的用户IP，只要该用户登陆过的IP都会被自动保存并在执行屏蔽操作后，永久禁止登陆。另外就是进行了一些列的BUG修复以及对移动端显示的优化，当然移动端样式还是很初级，后期我们会有一次针对移动端的独立升级，全面优化手机浏览。 Mao10CMS v6.1.4 更新日志：1、移除商品支付时，需要先充值再支付的限制，支付可直接完成。2、用户中心模块整体重写，对用户等级增加更多玩法，同时也增加了更加友好丰富的个人及好友动态面板。这个也是此版本最主要的更新内容。3、重写了首页模板，并优化了友情链接获取参数。4、商品搜索功能加入。5、移

Xiuno BBS简介 Xiuno BBS 是一款国产、小巧、稳定、支持在大数据量下仍然保持高负载能力的轻型论坛。它只有 21 个表，源代码压缩后 600k 左右，运行速度非常快，处理单次请求在 0.01 秒级别，在有 APC、XCache 的环境下可以跑到 0.00x 秒，对第三方类库依赖极少，仅仅前端依赖 jquery.js/zepto.js，作者认为它就像一辆纯手工打造的法拉利，动力强劲，没有一丝赘肉，方便部署和维护，是一个非常好的二次开发的基石。 Xiuno BBS功能探索轻论坛在移动背景下的交互模式 1.赞。抛弃了传统论坛的，评分，精华，高亮等内容筛选功能，引入了“赞”的机制，帖子的好坏，用户组的升级、主题颜色等都与与“赞”紧密关联起来。 2. 全新编写的编辑器支持：表格、增删行列、HTML5 客户端图片缩略，降低服务端 CPU 运算压力、支持 QQ 截图直接粘贴。 3. 支持游客发帖、回帖、点赞。 4. 支持自定义 URL，有利于 SEO，网址可以像这样：http://bbs.xiuno.com/xiuno-bbs-3-official-upgrade 5. 支持 SMTP 邮件发送，邮件列表设置 6. 支持 IP 限制：限制每日 IP 发帖数，发邮件数，上传附件数 7. 手机版本 8. 更多不一一列出 PHP 框架：XiunoPHP 3.0 抛弃了 OO，采用函数式封装，有利于 HHVM 编译 / opcode 缓存，提前与 PHP7 契合做好准备，并且倡导以下原则： 1. 不要 include 变量 2. 不要采用 eval(), 正则表达式 e 修饰符 3. 不要采用 autoload 4. 不要采用 $$var 多重变量 5. 不要使用 PHP 高级特性 __call __set __get 等魔术方法 6. 尽量采用函数封装功能，通过前缀区分模块。前端框架：XiunoUI 无图片的 UI 库，兼容到 IE8，参考了 BootStrap，简化了 class 命名，砍掉了鸡肋的响应式布局，点击查看真相编辑器：XNEditor 它基于 zepto.js，兼容 jquery.js，只有 82k，但是实现了标准浏览器下的编辑器常见功能：加粗、斜体、颜色、字体、字号、表格、图片上传、文件上传、客户端缩略、全屏，HTML 切换、上一步下一步等功能。因为他不用考虑IE678，所以可以实现的非常优美，短小。写过编辑器的同学应该知道，编辑器最大的一个坑就是 IE 的 Range 跟 w3c 定义的 Range 的巨大鸿沟。如果不考虑 IE，代码可以精简很多。 Xiuno BBS v4.0.2 正式版更新日志 Xiuno BBS 4.0 采用 Bootstrap 4 JQuery 3 作为前端类库，全面支持移动端浏览器；后端 XiunoPHP 4.0 支持了 NoSQL 的方式操作各种数据库，这个版本是一个巨大的飞跃。 Xiuno BBS 4.0 采用 MIT 协议发布，您可以自由修改、派生版本、商用而不用担心任何法律风险（修改后应保留原来文件的版权信息）。 Xiuno BBS前台页面 Xiuno BBS后台管理后台路径：域名/admin 用户名与密码：admin（安装时可设置）后台页面相关阅读同类推荐:站长常用源码

JW页面工厂是一个适用于joomla的自由拖拽式建站工具，受到国内众多Joomla用户的信任。JW页面生成器功能性和随时可用性强，无论你是初学者还是专业人士，它都能让你独立建立一个网站！ JW页面工厂功能特性： 1、充分响应和移动端友好的设计无论您使用页面工厂构建什么，它都会实现完全响应和移动端友好的效果。页面工厂使用Bootstrap 4顺利完成。如果你用这个工具创建一个页面，它将会100%响应并且对移动端友好，就像魔法一样。 2、实时前端编辑页面工厂为您带来全新的前端编辑系统，为您带来最便捷的web开发体验。添加一个元素，编辑并实时查看更改效果。查看您的定制效果，不需要预览。一切就在你眼前发生。 3、现成的版块设计页面工厂带给您90+现成的部分设计，这些内置的部分将使你的开发工作异常简单。拖放你选择的任何块，页面设计效果可以立即呈现，整个过程在瞬间完成! 4、设备的响应能力 “一种尺寸”并不适合所有设备。这就是为什么在页面工厂中，我们引入了特定设备的响应性。您可以在不同的设备上呈现站点，并查看它在特定设备类别上的外观效果。最令人兴奋的是，你将可以现场体验所有这些定制! 5、创建你自己的区块样式不用一遍又一遍地为你的网站制作类似的部分。使用新的页面工厂库系统，你可以在不同的页面上重复使用以前设计的部分。您所要做的就是将您的设计保存在库中，并将其放置在您想要的任何位置。很简单，不是吗? 6、翻新系统结构我们已经彻底检修了页面工厂UI和UX。我们重新设计了编辑器(前后)的完整外观和感觉。为了让开发过程更快，我们告别了“Modals”，现在一切都是实时的，触手可及。 7、精致时尚的插件这些插件使用扩展的数字字段和功能重新定义了新外观，现在可以更舒适地使用这些创新插件。新的字段和定制工具将把您的体验带到一个新的标准。用这些强大的插件把你的梦想变成现实。 8、革新后的媒体管理器页面工厂带来了你能想到的最先进的媒体管理器。我们运用了时尚的材料设计理念，重新设计的功能确实令人惊讶。它支持许多文件类型和附件，如图像、视频、文档和档案。 9、神奇的形状分频器在页面工厂中有许多现成的形状可以设计运用到网页的不同部分，这样网站就会呈现一个不同的，视觉上更容易与形状分割的外观。在网站的顶部和底部添加形状非常简单，而且你还可以灵活地翻转和改变所添加的形状。 10、自定义字体样式使用页面工厂更改文本的样式比以往任何时候都容易。可以在插件的编辑界面，很容易地设置字体的重量，使字体更有吸引力。选择一种字体，然后用所有可用的选项进行样式化，包括文本大小、字母间距、空白、对齐等。 11、字体系列在你有办法选择你想要的字体之前，用文字装饰你的网站是不完整的。使用页面工厂，您可以在站点上使用字体。从大量的字体系列集合中选择正确的字体，以尽可能简单的方式获得良好的排版效果。 12、重新设计的用户界面以材质设计为核心，对页面工厂前端编辑器的布局进行了重新设计。现在您不必打开addons或row选项来修改内容。每个样式都可以在侧边栏上完成。此外，我们还改进了后端编辑器的布局和用户体验。 13、常见复杂的行列结构使用页面工厂，您的创造力是无限的。可以构建您可以想象的任何布局。添加行、列、嵌套列和插入插件可以在眨眼之间完成。你可以调整页边距，填充和排水沟，以快速制作一个完美的布局。 14、在一次点击中复制任何东西页面工厂提供复制粘贴功能，通过重用现有的行、列和插件安排，帮助您快速创建复杂的布局。您可以轻松地复制元素并将它们粘贴到所需的位置。 15、启用或禁用行列插件轻松地启用或禁用页元素，如行、列和插件。禁用的元素仍然存在于后端，但是用户不会在活动站点上看到它们。通过这种方式，您可以在不丢失有价值的定制的情况下执行实验并继续开发活动。 16、无限的撤销和重做以一个更好的方式用最新的工具享受无限的撤消/重做能力的页面工厂。使用此功能，您可以在编辑页面时立即撤消或重做更改。这是一个非常有用的能救命的功能，恢复到页面的先前状态非常简单。 17、控制柱水平间距使用页面工厂，您可以控制被称为“gutter”的列水平间距。如果页面设计要求相邻的两列之间没有空间，则可能需要删除排水沟空间。所以，现在你可以通过简单地移除排水沟来完成它。 18、多语言支持页面工厂提供100%的语言自由。无论您的站点语言是什么(包括RTL脚本)，页面构建器都将以本地方式工作。此外，使用语言管理系统，您可以在组件中获得一个单击方法来安装新语言。然后页面构建器将以相应的语言显示，使用站点的默认语言。 19、预先设计的模板布局页面工厂提供25+预先设计的专业版页面布局。您可以使用这些现成的页面布局在几分钟内启动站点。只需选择预先构建的布局，并使用内容对

Mao10CMS是基于Thinkphp和Bootstrap开发的免费开源PHP建站系统，适用于搭建各种小型商城、购物分享、社区以及企业网站。当然，您也可以用它来做一个简单的博客。简单易用是Mao10CMS一直追求的目标，在这里没有繁琐杂乱的后台，没有晦涩难懂的设置，您需要做的只是从安装到使用，然后把一切精力专注于内容建设上！再次感谢大家对Mao10CMS的支持！ Mao10CMS V2.4主要更新内容：商品模块功能增强，每个商品可自定义参数。屏蔽IP功能，可以屏蔽不受欢迎的用户IP，只要该用户登陆过的IP都会被自动保存并在执行屏蔽操作后，永久禁止登陆。另外就是进行了一些列的BUG修复以及对移动端显示的优化，当然移动端样式还是很初级，后期我们会有一次针对移动端的独立升级，全面优化手机浏览。安装方法 Mao10CMS安装需求环境 PHP5.3+ & Mysql5.0+ 1、将Public文件夹、Application/Runtime文件夹、Application/Common/Conf/db.php、设置为可写。 2、将程序上传到网站空间后，访问http://你的域名/install.php进行安装。 3、安装完成后，删除网站根目录的install.php和Application/Home/Controller/InstallController.class.php。伪静态设置方法 1、配置服务器： [ Apache ]环境 - httpd.conf配置文件中加载了mod_rewrite.so模块 - AllowOverride None 将None改为 All - 把下面的内容保存为.htaccess文件放到应用入口文件的同级目录下 RewriteEngine on RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^(.*)$ index.php/$1 [QSA,PT,L] 其他环境下伪静态配置方法会陆续补充 2、修改Mao10CMS配置文件：打开程序目录下的Application/Common/Conf/config.php文件，讲URL_MODEL的值从0修改为2。只需2步，伪静态设置成功～支持 Mao10CMS承诺永久免费开源，您在使用过程中，如有任何疑问可以随时点击网站右侧的在线客服，进行咨询。 Mao10CMS v2.6更新内容用户中心改版，加入用户实时动态以及关注用户的实时动态评论中增加 @用户功能（目前已知BUG，用户名中有空格则无法正确@）支付宝双功能接口即时到账支付时的BUG修复文章内容时间不正确首页分享图片鼠标悬停闪烁未添加参数则不显示该参数快速发布新话题首页最新话题错位部分表单安全性修正新增钩子函数，可通过add_go()和do_go()函数新增和监听钩子，后续会逐步完善开发文档，便于大家开发主题和插件新增微信接口功能，自动回复消息经测试已经可以正常运行。群发消息功能赞不稳定，仅供测试使用。Mao10CMS后续版本中，还会围绕微信接口部分增加更多更实用的功能

移动配适基础应用+Bootstrap

61,115

社区成员

60,728

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章