如果你想做一些事情，可以这样想：

<img class="w-100 w-md-50" src="..." alt="...">

您可以通过使用div和类“col”和“mx-auto”来完成此操作，如下所示：

<div class="col col-md-6 mx-auto">
  <img class="w-100" src="..." alt="...">
</div>

有一段时间，我也在搜索同样的问题，除了使用media query，没有找到解决方案。
因此，我决定在Bootstrap的基础上，在media query的帮助下，为不同分辨率的width sizes创建一个CSS项目。
因此，每当我想使用像w-sm-100 w-md-50 w-lg-25这样的东西时，我可以简单地在我的bootstrap CDN链接之后包含我自己创建的stylesheet CDN Link，然后我就可以像这样使用这样的classes。
下面是样式表的链接：

<link rel="stylesheet" href="https://drive.google.com/uc?export=view&id=1yTLwNiCZhIdCWolQldwq4spHQkgZDqkG">

示例：

<!-- Bootstrap CDN link -->

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

<!-- My own Stylesheet CDN Link -->
<link rel="stylesheet" href="https://drive.google.com/uc?export=view&id=1yTLwNiCZhIdCWolQldwq4spHQkgZDqkG">

<!-- HTML -->
<h1 class="w-xl-75 w-lg-100 w-md-50 w-sm-75 w-100 bg-primary">Hello World</h1>

唯一的缺点是，如果您要指定属性w-md-50，它只能在md上工作，而不能在xl或lg上工作。
因此，为了使其适用于大于md的器件。
你必须这样做：w-xl-50 w-lg-50 w-md-50 .

对于Bootstrap 5，将其添加到变量文件中，它将执行您所描述的操作。

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge( 
$utilities, ( "width": map-merge( 
map-get( $utilities, "width"), ( responsive: true ),),)
);

更多信息，请访问：https://getbootstrap.com/docs/5.0/utilities/api/#enable-responsive

实际上，在Bootstrap 4中，他们指定并显示了所使用的断点。
使用他们使用过的相同查询，您可以创建一个响应类，只需使用相同的格式就可以轻松地理解它。
下面是我目前使用的样式表中的一些代码片段：

/* CUSTOM WIDTHS */
.w-10, .w-xs-10 { width: 10%!important; }
.w-15, .w-xs-15 { width: 15%!important; }
.w-20, .w-xs-20 { width: 20%!important; }

/* BREAKPOINTS */

/* SM breakpoint */
@media (min-width: 576px) {
    /* CUSTOM WIDTHS */
    .w-sm-10 { width: 10%!important; }
    .w-sm-15 { width: 15%!important; }
    .w-sm-20 { width: 20%!important; }
}

/* MD breakpoint*/
@media (min-width: 768px) {
    /* CUSTOM WIDTHS */
    .w-md-10 { width: 10%!important; }
    .w-md-15 { width: 15%!important; }
    .w-md-20 { width: 20%!important; }
}

/* LG breakpoint */
@media (min-width: 992px) {
    /* CUSTOM WIDTHS */
    .w-lg-10 { width: 10%!important; }
    .w-lg-15 { width: 15%!important; }
    .w-lg-20 { width: 20%!important; }
}

使用时，它的作用类似于bootstrap的响应。例如：
第一次