Question

对于bootstrap，类本身内置了现有的宽度截止值（例如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的$screen-sm-min文件中的$screen-md-min，$screen-lg-min和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 gems进行自定义构建？

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

在Gemfile中，您需要添加bootstrap-sass gem，并确保存在＆gt; 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媒体查询。

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

1 个答案: