覆盖引导程序@media 断点答案

【问题标题】：override bootstrap @media breakpoint覆盖引导程序@media 断点
【发布时间】：2022-01-14 16:01:54
【问题描述】：

我对这些东西很陌生，所以请多多包涵。

我最近一直在搞乱视图，想知道是否可以覆盖存储在引导程序中的断点。

即）

:root {
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
}

具体来说，我想覆盖 --breakpoint-md 设置。我注意到有人问过类似的问题，但答案并不清楚。据我所知，这些成为在特定情况下使用的变量。我希望该设置适用于整个网站。这可能吗？

稍微解释一下。当我更改屏幕大小时，我的列堆叠为 767 像素，这是我在 768 像素时想要的外观，但在 768 像素时，视图会被挤压得很丑。我一直在阅读有关 scss 的信息，这是唯一的解决方案吗？

【问题讨论】：

标签： javascript html css sass

【解决方案1】：

您可以使用引导程序自定义任何您想要的内容。

要开始使用，请在此处查看有关自定义的文档：https://getbootstrap.com/docs/5.0/customize/overview/

您最好的选择是使用 sass，如下所述：https://getbootstrap.com/docs/5.0/customize/sass/

在您的 custom.scss 文件中有类似的内容。

// Custom.scss
// Option A: Include all of Bootstrap

// Include any default variable overrides here (though functions won't be available)

@import "../node_modules/bootstrap/scss/bootstrap";

// Then add additional custom code here

:root {
--breakpoint-md: 768px;
}

【讨论】：

【解决方案2】：

如果您使用的是 bootstrap scss，请使用以下内容。

首先你必须安装 boostrap

npm install bootstrap

然后你可以设置自定义断点。

@import '../node_modules/bootstrap/scss/functions';
@import '../node_modules/bootstrap/scss/variables';

$grid-columns:      12;
$grid-gutter-width: 1.5rem;

$grid-breakpoints: (
    xs: 0,
    vs: 300px,
    sm: 500px,
    md: 750px,
    lg: 1000px,
    vl: 1300px,
    xl: 1600px
);

$container-max-widths: (
  xs: 299px,
  vs: 499px,
  sm: 749px,
  md: 999px,
  lg: 1299px,
  vl: 1599px,
  xl: 1999px
);

@import '../node_modules/bootstrap/scss/bootstrap.scss';

【讨论】：

所以，我已经完成了这一切，控制台没有显示错误，而且我的 sass 似乎是基于 Live Sass Compile 编译的。但对我来说，这个观点并没有在预期的点上打破。有什么我可以提供的更多信息吗？
检查窗口的断点检查了吗？
我不完全确定你的意思。我在“样式”窗口中看到一个调用来自“custom.scss”的断点，它似乎在_root.scss 中被划掉了。这让我相信代码在幕后工作并从根目录覆盖代码。但这种变化并没有产生任何影响。
如果将这些样式应用于您的组件，那么它会产生很大的不同。现在我用我写的代码在我的项目中使用它。
您可以在develop.soundblock.arena.com 登录页面上轻松查看。这里我使用了 col-md-7。我将 md 设置为 750px，因此您可以在该实时页面上查看。