首页 > 求助bootstrap响应式问题.

求助bootstrap响应式问题.

我用的是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》。里面有写。

【热门文章】
【热门文章】