文章/答案/技术大牛

发布

社区首页 >问答首页 >我想在>546 do屏幕(Sm)中以以下格式显示我的进度条

问我想在>546 do屏幕(Sm)中以以下格式显示我的进度条
EN

Stack Overflow用户

提问于 2022-04-16 09:33:35

回答 1查看 25关注 0票数 1

如果引导程序不能处理这个问题，那么有人会建议使用其他方法吗?即使我使用了--xs-6，我都想以小屏幕大小的图像显示我的进度条。

这就是如何在小屏幕上显示我的图像

<div class="container">
        <div class="row">
            <div class="col-sm-6 col-md-4">
                <h3 class="progress-title progress-bar-1">HTML</h3>
                <div class="progress">
                    <div class="progress-bar"></div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <h3 class="progress-title progress-bar-2">HTML</h3>
                <div class="progress">
                    <div class="progress-bar"></div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <h3 class="progress-title progress-bar-3">HTML</h3>
                <div class="progress">
                    <div class="progress-bar"></div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <h3 class="progress-title progress-bar-4">HTML</h3>
                <div class="progress">
                    <div class="progress-bar"></div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <h3 class="progress-title progress-bar-5">HTML</h3>
                <div class="progress">
                    <div class="progress-bar"></div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <h3 class="progress-title progress-bar-6">HTML</h3>
                <div class="progress">
                    <div class="progress-bar"></div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <h3 class="progress-title progress-bar-1">HTML</h3>
                <div class="progress">
                    <div class="progress-bar"></div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <h3 class="progress-title progress-bar-2">HTML</h3>
                <div class="progress">
                    <div class="progress-bar"></div>
                </div>
            </div>
        </div>
    </div>

html

css

grid

progress-bar

bootstrap-5

回答 1

Stack Overflow用户

发布于 2022-04-16 09:43:32

您可以只添加这个@media屏幕和(最大宽度:546 it )，如果您希望它小于546 it。如果它不起作用的话，放进去吧！所有这些都很重要。

.row {
  display:grid;
  grid-template-columns:auto auto;
  grid-gap:10px;
  }

<div class="container">
        <div class="row">
            <div class="col-sm-6 col-md-4">
                <h3 class="progress-title progress-bar-1">HTML</h3>
                <div class="progress">
                    <div class="progress-bar"></div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <h3 class="progress-title progress-bar-2">HTML</h3>
                <div class="progress">
                    <div class="progress-bar"></div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <h3 class="progress-title progress-bar-3">HTML</h3>
                <div class="progress">
                    <div class="progress-bar"></div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <h3 class="progress-title progress-bar-4">HTML</h3>
                <div class="progress">
                    <div class="progress-bar"></div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <h3 class="progress-title progress-bar-5">HTML</h3>
                <div class="progress">
                    <div class="progress-bar"></div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <h3 class="progress-title progress-bar-6">HTML</h3>
                <div class="progress">
                    <div class="progress-bar"></div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <h3 class="progress-title progress-bar-1">HTML</h3>
                <div class="progress">
                    <div class="progress-bar"></div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <h3 class="progress-title progress-bar-2">HTML</h3>
                <div class="progress">
                    <div class="progress-bar"></div>
                </div>
            </div>
        </div>
    </div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71892717

复制

相似问题

问我想在>546 do屏幕(Sm)中以以下格式显示我的进度条
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我想在>546 do屏幕(Sm)中以以下格式显示我的进度条EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我想在>546 do屏幕(Sm)中以以下格式显示我的进度条
EN