求助bootstrap响应式问题.

Question

我用的是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>  

Answer 1

col-lg-* 这个类是在浏览器视口宽度大于1200px时生效，

Answer 2

应该增加 col-md-*

因为 col-lg-* 是在媒体查询里的，所以屏幕小于 1200px 时，col-lg-* 类是不起作用的。

可以看看 《深入 bootstrap》。里面有写。

Answer 3

去看看 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