媒体查询宽度如何应用于预设的Bootstrap Xs sm md lg列类？

Question

对于引导程序，这些类本身内置了现有的宽度限制（例如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等？ 还是有更好的解决方案？

Answer 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媒体查询。