如何让媒体查询宽度应用于预置引导xs md lg列类？

Question

对于引导，在类本身中有现有的宽度裁剪(例如-xs-3，col 8，col-md-10，col-lg-1)。这些类已经预先设定为768m992和1024 to的截止点。

如果您通过媒体查询定义了自己的截止点，那么如何确保像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、sm md lg等？还是有更好的方法来做这件事？

Answer 1

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

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

$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宝石进行自定义构建？

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

在Gemfile中，您需要添加引导-sass创业板，并确保>sass-rails创业板在默认情况下被添加到新的Rails应用程序中。

然后:在app/assets/stylesheets/application.scss中导入引导样式

// "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";

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