Question

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

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

我使用了Bootstrap的gem安装。

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

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

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

Answer 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;

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

2 个答案: