Question

我正在开展一个响应直至col-sm的项目。我需要它在移动设备中呈现完美。由于整个项目已经建立起来，我几乎不可能为移动设备添加col-xs-*。是否有任何jquery/scss方法可以使col-sm在移动设备上以col-xs的形式运行。

我需要在移动设备上打开平板电脑版

Answer 1

由于col-sm类（特别是宽度）从768px开始，你可以覆盖Bootstrap的col-sm样式，以模仿col-xs对于较低视口的行为。要确保的第一件事是您在项目中有一个父类可以用作父/子选择器，因为简单地编写像.col-sm-* {}这样的样式会与Bootstrap的本机样式冲突。

假设您的正文标记有一个“page”类，我们可以使用@media个查询来模仿col-xs类在767px以下的行为：

@media (max-width: 767px) {
  .page .col-sm-3 {
    width: 25%;
  }
  .page .col-sm-6 {
    width: 50%;
  }
  .page .col-sm-9 {
    width: 75%;
  }
}

您也可以像Bootstrap一样使用通配符：

@media (max-width: 767px) {
  .page div[class^="col-sm-"] {
    float: left;
  }
}

另外，请确保在Bootstrap之后引用自定义CSS文件。

Answer 2

您也可以在代码中执行多种col大小。

`<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>`

以下是更多信息的链接：http://getbootstrap.com/css/

如何使bootstrap col-sm- *在移动设备中工作？

2 个答案: