Bootstrap - 响应式布局 - 《Java Web 笔记》

（1）基本使用

（1）基本使用

响应式布局依赖与栅格系统，将一行分为12个格子，可以指定元素占的格子数

容器

container：两侧有空白的固定宽度
container-fluid：占满整个宽度

自动换行

col-lg-1：大屏幕每个div占据1个格子
col-md-2：中等屏幕每个div占据2个格子
col-sm-3：小屏幕每个div占据3个格子
col-xs-4：超小屏幕每个div占据4个格子
以下例子：随着屏幕越来越小，从12个div占据一行 >>> 6 >>> 4 >>> 3，最小就是3个div，每个占据4个格子，小到一定程度就不能缩小了
- lg时，12x1=12，刚好一行12
- md时，12x2=24，大于12格子，超过的自动换行，两行每行6个div，每个div占据2个格子

一行最多12个格子，超过自动换行

      <div class="container-fluid">
          <div class="row">
              <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 inner">栅格</div>
              <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 inner">栅格</div>
              <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 inner">栅格</div>
              <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 inner">栅格</div>
              <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 inner">栅格</div>
              <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 inner">栅格</div>
              <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 inner">栅格</div>
              <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 inner">栅格</div>
              <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 inner">栅格</div>
              <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 inner">栅格</div>
              <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 inner">栅格</div>
              <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 inner">栅格</div>
          </div>
      </div>

向上兼容

col-xs-4最小屏幕一行占据4格，随着屏幕增大也一直是占据4格

      <div class="container-fluid">
          <div class="row">
              <div class="col-xs-4 inner">栅格</div>
              <div class="col-xs-4 inner">栅格</div>
              <div class="col-xs-4 inner">栅格</div>
              <div class="col-xs-4 inner">栅格</div>
              <div class="col-xs-4 inner">栅格</div>
              <div class="col-xs-4 inner">栅格</div>
              <div class="col-xs-4 inner">栅格</div>
              <div class="col-xs-4 inner">栅格</div>
              <div class="col-xs-4 inner">栅格</div>
              <div class="col-xs-4 inner">栅格</div>
              <div class="col-xs-4 inner">栅格</div>
          </div>
      </div>

向下不兼容

col-lg-4最大屏幕一行占据4格，随着屏幕变小导致一个元素占据一整行

      <div class="container-fluid">
          <div class="row">
              <div class="col-lg-4 inner">栅格</div>
              <div class="col-lg-4 inner">栅格</div>
              <div class="col-lg-4 inner">栅格</div>
              <div class="col-lg-4 inner">栅格</div>
              <div class="col-lg-4 inner">栅格</div>
              <div class="col-lg-4 inner">栅格</div>
              <div class="col-lg-4 inner">栅格</div>
              <div class="col-lg-4 inner">栅格</div>
              <div class="col-lg-4 inner">栅格</div>
              <div class="col-lg-4 inner">栅格</div>
              <div class="col-lg-4 inner">栅格</div>
          </div>
      </div>