栅格响应式工具

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

<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. 该属性指定到外层包裹器上
posted @ 2020-12-11 23:11  Serenpity  阅读(42)  评论(0编辑  收藏  举报