在 Rails 应用程序中自定义 Bootstrap 4 媒体查询答案

【问题标题】：Customize Bootstrap 4 media queries in a Rails app在 Rails 应用程序中自定义 Bootstrap 4 媒体查询
【发布时间】：2018-05-15 12:01:13
【问题描述】：

我想自定义 Bootstrap 4 媒体查询（添加一个新的 xxl 媒体查询）。

基于这个解决方案Bootstrap 4 - how to use media query mixin，我尝试定义新的 $grid-breakpoints 但它不会影响引导行为。

我使用了 Bootstrap 的 gem install。

问题似乎在于 Bootstrap 不使用新的媒体查询，而且我不知道如何在我的样式表中明确包含 Bootstrap 文件（以使用 Bootstrap 混合和函数）。 Bootstrap的安装位于

/Users/myname/.rvm/gems/ruby-2.4.1/gems/bootstrap-4.0.0.beta2.1

【问题讨论】：

标签： ruby-on-rails twitter-bootstrap

【解决方案1】：

首先bootstrap-rubygem 建议使用 scss 作为您的应用程序样式表。

创建一个包含所有引导程序覆盖的文件，比如说bootstrap_overrides.scss，然后从here 复制/粘贴和修改您想要的任何变量，在您的情况下应该是这样的：

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1500px
) !default;
$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1440px
) !default;

然后只需将您的覆盖导入到application.scss 之前引导，如下所示：

@import "bootstrap_overrides";
@import "bootstrap";

【讨论】：

【解决方案2】：

您应该尝试在此处复制/粘贴和修改 gem 提供的 bootstrap 4 scss 变量：https://github.com/twbs/bootstrap-rubygem/blob/master/assets/stylesheets/bootstrap/_variables.scss

从161行：

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;

【讨论】：

我已经尝试替换这些值，但不会影响页面行为。
我们解决了这个错误。我们在 application.css 中导入 *= 需要 lib/lib_override *= 需要 lib/lib 库有引导和 lib_override 新的媒体查询/容器宽度。新大小需要与引导导入位于同一文件中。所以在 lib.scss 我们现在有 - 'before_lib' import - 'bootstrap-grid' import with before_lib.scss $grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1500px ) !default; $container-max-widths: (sm: 540px, md: 720px, lg: 960px, xl: 1140px, xxl: 1440px) !default;
如果格式不清楚，我可以创建一个答案，谢谢