首页 > 其他 > 详细

栅格响应式工具

时间:2020-12-12 09:28:26      阅读:30      评论:0      收藏:0      [点我收藏+]

利用媒体查询功能使用工具类可以方便的针对不同设备展示或隐藏页面内容

<div class="container">
      <div class="row hidden-sm">
        <div class="bg-info col-lg-3">col-lg-3</div>
        <div class="bg-success col-lg-6">col-lg-6</div>
        <div class="bg-info col-lg-3">col-lg-3</div>
      </div>
      <div class="row visible-sm">
        <div class="bg-info col-lg-4">col-lg-4</div>
        <div class="bg-success col-lg-2">col-lg-6</div>
        <div class="bg-info col-lg-6">col-lg-2</div>
      </div>
    </div>
  1. visible-xs
    -sm
    -md
    -lg
    开始时隐藏,媒体查询到指定区域时才显示
  2. hidden-xs
    -sm
    -md
    -lg
    开始时显示,媒体查询到指定区域时隐藏
  3. 该属性指定到外层包裹器上

栅格响应式工具

原文:https://www.cnblogs.com/mufengs16/p/14123336.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!