BootStrap开发实践 互动版

多个布局属性

如果想让一个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中同时加入针对不同屏幕尺寸的布局属性,看看运行效果是怎么样的?