我用的是col-lg-*,为什么笔记本只要缩小一下浏览器文字就会掉下来呢?
<div class="content">
<div class="services" id="services" >
<div class="container tu1">
<div class="col-lg-12 ">
<h2>文盾 文化执法云平台</h2>
</div>
<div class="col-lg-5">
<img class="img-responsive" src="images/future.png">
</div>
<div class="col-lg-6 col-lg-offset-1">
<div class="word1">
<p class="text-left">对市场主体经营企业进行全方位的数据监控和视频监控</p><p class="text-left">为文化市场执法提供规范化、专业化、信息化的一站式解决方案</p><p class="text-left">高效管理、智慧执法,中国唯一的文化市场执法云管家</p><p class="text-left">强大的云平台及终端系统功能,使文化执法做到立体式、全方位、全覆盖</p>
</div>
<div id="liaojie"><a href="http://www.zhifayun.cn/" target="_blank" >了解更多</a></div>
</div>
</div>
<div class="clearfix"></div>
</div>
去看看 bootstrap的媒体查询是什么意思
/ 超小屏幕(手机,小于 768px) /
/ 没有任何媒体查询相关的代码,因为这在 Bootstrap 中是默认的(还记得 Bootstrap 是移动设备优先的吗?) /
/ 小屏幕(平板,大于等于 768px) /
@media (min-width: @screen-sm-min) { ... }
/ 中等屏幕(桌面显示器,大于等于 992px) /
@media (min-width: @screen-md-min) { ... }
/ 大屏幕(大桌面显示器,大于等于 1200px) /
@media (min-width: @screen-lg-min) { ... }
http://v3.bootcss.com/css/#grid
col-lg-* 这个类是在浏览器视口宽度大于1200px时生效,
应该增加 col-md-*
因为 col-lg-*
是在媒体查询里的,所以屏幕小于 1200px 时,col-lg-*
类是不起作用的。
可以看看 《深入 bootstrap》。里面有写。