css - 为什么 bootstrap css (3.2) 可以在移动端和桌面端工作

Question

请原谅我是 BootStrap 的新手。我正在阅读教程 Bootstrap Css Getting Start .教程中有一个示例。

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div> 

教程以这种方式说明此示例将支持移动设备、平板电脑和台式机。 我对此感到困惑。 bootstrap css 如何在示例中工作？ 我查看了 css 代码，发现了

.col-xs-12 {
  width: 100%;
}

.col-sm-6 {
  width: 50%;
}

.col-md-8 {
  width: 66.66666667%;
}

对于 <div class="col-xs-12 col-sm-6 col-md-8">唯一可用的 CSS 是 .col-md-8 .所以我的问题是

1.这样做有什么特殊意义吗(我的意思是将 col-xs-12 col-sm-6 col-md-8 应用于 div )？实际上唯一有效的 css 类是 col-md-8 .

2.如果我想设计一个在移动端和桌面端都好看的网站。如何使用 BootStrap css 实现它？请给我一些建议。谢谢。

Answer 1

Bootstrap 使用 CSS Media Queries针对特定分辨率。

如果再往下Bootstrap's CSS file你会发现这样的东西:

@media (min-width: 768px) {
   .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
   .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left;
  }
  .col-sm-12 {
    width: 100%;
  }
  .col-sm-11 {
    width: 91.66666667%;
  }
  .col-sm-10 {
    width: 83.33333333%;
  }
  ...
}

例如，此特定媒体查询针对最小宽度为 768 像素的浏览器。