如何覆盖/自定义Bootstrap中col-sm-*/col-md-*的@media (min-width)规则？

Hey there! Let's figure out how to adjust that Bootstrap sm breakpoint from 576px to 640px for you. Here are a few reliable solutions based on your project setup:

Even though you mentioned not finding a corresponding variable in _variables.scss, Bootstrap actually defines all grid breakpoints in a map variable called $grid-breakpoints—it’s easy to overlook!

Open up your _variables.scss file and search for this block:

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

Just change the value for sm from 576px to 640px, then recompile your Sass files. This will automatically update all styles dependent on the sm breakpoint (including .col-sm, .col-sm-*, and any other sm-targeted utilities) to trigger at 640px instead of 576px.

If you're using the precompiled bootstrap.css file instead of the Sass source code, you can override the existing styles in a custom CSS file (make sure to load this file after Bootstrap's CSS to ensure priority).

Here's how to rewrite the media query rules for .col-sm and .col-sm-* classes:

/* Override sm breakpoint styles to trigger at 640px */
@media(min-width: 640px) {
  .col-sm {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }

  /* Repeat this pattern for all .col-sm-* classes (1 through 12) */
  .col-sm-2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }

  /* Add .col-sm-1, .col-sm-3, ..., .col-sm-12 here with their respective width values */
}

Note: This method is more tedious since you'll need to rewrite styles for every .col-sm-* variant, but it works if you can't use Sass compilation.

If you prefer a no-code approach, you can use Bootstrap's custom build tool to adjust the sm breakpoint value directly, then download a pre-compiled CSS file tailored to your needs. You won't have to manually edit any code this way.

内容的提问来源于stack exchange，提问作者aaaaaaaaax10