如何将媒体查询宽度应用于预设的引导 xs sm md lg 列类？答案

【问题标题】：How to have media query widths apply to preset bootstrap xs sm md lg column classes?如何将媒体查询宽度应用于预设的引导 xs sm md lg 列类？
【发布时间】：2015-04-26 07:42:12
【问题描述】：

对于引导程序，类本身内置了现有的宽度截止（例如 col-xs-3、col-sm-8、col-md-10、col-lg-1）。这些类已经预设为 768m 992 和 1024px 的截止。

如果您通过媒体查询定义自己的截止点，您如何确保像 col-xs-3 这样的预设类确实在您通过媒体查询指定的截止点处截止？

@media only screen and (min-width: 300px) and (max-width: 600px) { 
  //your code stuff
}

@media only screen and (min-width:600px) and (max-width: 900px) { 
  //your code stuff         
}

@media only screen and (min-width: 900px)  { 
  //your code stuff
}

如何让媒体查询中定义的这些截止点实际对应于 col-xs、sm md lg 等？或者有没有更好的方法来解决这个问题？

【问题讨论】：

您必须进行自定义构建：Customize Bootstrap
我想保留 bootstrap vanilla，并在我的自定义内容上分层。我可以不简单地在样式表中定义自定义变量以覆盖变量值吗？如何使用 rails gem 进行自定义构建？

标签： css twitter-bootstrap twitter-bootstrap-3 sass

【解决方案1】：

这些值（断点）由 Bootstrap 的 variables.less 文件中的 $screen-sm-min、$screen-md-min 和 $screen-lg-min 变量设置。

更改断点时，您还必须更改容器宽度。我建议您使用以下公式来做到这一点：

$container-*:           floor( ( $screen-* - $grid-gutter-width ) / $grid-columns ) * $grid-columns + $grid-gutter-width;

另请参阅：https://github.com/twbs/bootstrap/issues/15623#issuecomment-96294396

最后你也应该考虑到。在variables.less文件中也有声明，如下：

//** Point at which the navbar becomes uncollapsed.
$grid-float-breakpoint:     $screen-sm-min !default;

如何使用 Rails gem 进行自定义构建？

另见https://github.com/twbs/bootstrap-sass#a-ruby-on-rails：

在您的 Gemfile 中，您需要添加 bootstrap-sass gem，并确保存在 >sass-rails gem - 默认情况下它已添加到新的 Rails 应用程序中。

然后：在 app/assets/stylesheets/application.scss 中导入 Bootstrap 样式：

// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
@import "bootstrap-sprockets";
$screen-sm-min: 300px;
$container-sm: floor( ( $screen-sm - $grid-gutter-width ) / $grid-columns ) * $grid-columns + $grid-gutter-width;
$screen-md-min: 600px;
$container-md: floor( ( $screen-md - $grid-gutter-width ) / $grid-columns ) * $grid-columns + $grid-gutter-width;
$screen-lg-min: 900px;
$container-lg: floor( ( $screen-lg - $grid-gutter-width ) / $grid-columns ) * $grid-columns + $grid-gutter-width;

@import "bootstrap";

Bootstrap 的代码是使用移动优先的方法构建的。 xs 网格是默认的，根本不需要任何媒体查询。然后sm 网格跟随屏幕宽度大于$screen-sm-min 等等。您不必设置max-width 媒体查询。

【讨论】：