BootStrap开发实践 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

多个布局属性

如果想让一个DIV在不同的屏幕中占有不同的屏宽该怎么做呢? BootStrap允许我们在一个DIV中写多个类别的布局属性,从而让该DIV在不同的屏幕中呈现不同的屏宽。如:

  <div class="row">
      <div class="col-md-8 col-xs-6 col-lg-4"></div>
  </div>

该DIV在中等屏幕中占有‘8/12’,在手机中占有‘6/12’,在大屏幕中占有屏幕比例的‘4/12’。

在DIV1中同时加入针对不同屏幕尺寸的布局属性,看看运行效果是怎么样的?