Bootstrap 导入组件SCSS文件时，引导网格忽略断点

yqkkidmi 于 2022-12-25 发布在 Bootstrap

关注(0)|答案(1)|浏览(178)

将Bootstrap网格导入角组件SCSS文件时，HTML文件中的网格列断点被破坏/忽略。

- 应用程序组件. scss**

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

// Some styles with media queries
@include media-breakpoint-up(sm) { ... }

- 应用程序.组件. html**

<div class="container">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div> <-- will be ignored (100%)
    <div class="col-sm-4">col-sm-4</div> <-- will be ignored (100%)
  </div>
</div>

- 意外行为：**

网格列将以100%的宽度显示，而不是66%和33%。Dev-Tools（Computed）显示：_variables. scss规则覆盖宽度属性的_grid. scss。
只要删除SCSS中的@import，网格就可以按预期工作了。但是我还需要SCSS文件中的媒体查询来获取其他内容（完全独立于网格内容）。

环境：*
Angular 15
NG Bootstrap 14（ Bootstrap 5.2.3）

twitter-bootstrap

来源：https://stackoverflow.com/questions/74905004/bootstrap-grid-is-ignoring-breakpoints-when-import-into-component-scss-file

1条答案

按热度按时间

ecr0jaav1#

溶液

Bootstrap 5

导入以下SCSS文件（而非bootstrap-grid）后，网格系统再次正常工作。

- 您的.组件. scss**

// do not import this:
@import '../node_modules/bootstrap/scss/bootstrap-grid';

// instead import this:
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Some styles with media queries
@include media-breakpoint-up(sm) { ... }

赞(0）回复(0）举报 2022-12-25

我来回答

Bootstrap 导入组件SCSS文件时，引导网格忽略断点

1条答案

溶液

Bootstrap 5

相关问题

热门标签

最新问答