覆盖 bootstrap @media 断点

Question

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

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

即）

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

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

解释一下。当我更改屏幕大小时，我的列堆叠在 767px，这是我在 768px 时想要的外观，但在 768px 时，视图被挤压得很难看。我已经阅读了一些有关 scss 的内容，这是唯一的解决方案吗？

Answer 1

您可以使用 bootstrap 自定义任何内容。

首先，请在此处查看有关自定义的文档：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;
}

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

覆盖 bootstrap @media 断点

override bootstrap @media breakpoint

html

javascript

css

sass