如何仅从大屏幕上删除 Bootstrap-container

Question

我想要容器在中小屏幕上都能正常工作。我只想从我的大屏幕上删除容器。我没有找到像 container-lg-none 这样的东西。请帮忙。任何帮助表示赞赏。这是我的代码：

<section>
    <div class="container m-organism-category">
        
        <div class="row ">
            <div class="col-4 col-md-2 mx-lg-0 ">
                <img src="http://assets.myntassets.com/dpr_1.5,q_60,w_400,c_limit,fl_progressive/assets/images/retaillabs/2021/1/28/85b47fa0-5e71-4f6d-bcf9-27946bd8d62f1611824554381-Kurta-Set.jpg" class="m-atom-round-img img-fluid"alt="">
            </div>
            <div class="col-4 col-md-2 m-atom-round-img">
                <img src="http://assets.myntassets.com/dpr_1.5,q_60,w_400,c_limit,fl_progressive/assets/images/retaillabs/2021/1/28/85b47fa0-5e71-4f6d-bcf9-27946bd8d62f1611824554381-Kurta-Set.jpg" class="m-atom-round-img img-fluid" alt="">
            </div>
            <div class="col-4 col-md-2">
                <img src="http://assets.myntassets.com/dpr_1.5,q_60,w_400,c_limit,fl_progressive/assets/images/retaillabs/2021/1/28/85b47fa0-5e71-4f6d-bcf9-27946bd8d62f1611824554381-Kurta-Set.jpg" class="m-atom-round-img img-fluid" alt="">
            </div>
            <div class="col-4 col-md-2">
                <img src="http://assets.myntassets.com/dpr_1.5,q_60,w_400,c_limit,fl_progressive/assets/images/retaillabs/2021/1/28/85b47fa0-5e71-4f6d-bcf9-27946bd8d62f1611824554381-Kurta-Set.jpg" class="m-atom-round-img img-fluid" alt="">
            </div>
            <div class="col-4 col-md-2">
                <img src="http://assets.myntassets.com/dpr_1.5,q_60,w_400,c_limit,fl_progressive/assets/images/retaillabs/2021/1/28/85b47fa0-5e71-4f6d-bcf9-27946bd8d62f1611824554381-Kurta-Set.jpg" class="m-atom-round-img img-fluid" alt="">
            </div>
            <div class="col-4 col-md-2">
                <img src="http://assets.myntassets.com/dpr_1.5,q_60,w_400,c_limit,fl_progressive/assets/images/retaillabs/2021/1/28/85b47fa0-5e71-4f6d-bcf9-27946bd8d62f1611824554381-Kurta-Set.jpg" class="m-atom-round-img img-fluid" alt="">
            </div>
            <div class="col-4 col-md-2">
                <img src="http://assets.myntassets.com/dpr_1.5,q_60,w_400,c_limit,fl_progressive/assets/images/retaillabs/2021/1/28/85b47fa0-5e71-4f6d-bcf9-27946bd8d62f1611824554381-Kurta-Set.jpg" class="m-atom-round-img img-fluid" alt="">
            </div>
            <div class="col-4 col-md-2">
                <img src="http://assets.myntassets.com/dpr_1.5,q_60,w_400,c_limit,fl_progressive/assets/images/retaillabs/2021/1/28/85b47fa0-5e71-4f6d-bcf9-27946bd8d62f1611824554381-Kurta-Set.jpg" class="m-atom-round-img img-fluid" alt="">
            </div>
            <div class="col-4 col-md-2">
                <img src="http://assets.myntassets.com/dpr_1.5,q_60,w_400,c_limit,fl_progressive/assets/images/retaillabs/2021/1/28/85b47fa0-5e71-4f6d-bcf9-27946bd8d62f1611824554381-Kurta-Set.jpg" class="m-atom-round-img img-fluid" alt="">
            </div>
            <div class="col-4 col-md-2">
                <img src="http://assets.myntassets.com/dpr_1.5,q_60,w_400,c_limit,fl_progressive/assets/images/retaillabs/2021/1/28/85b47fa0-5e71-4f6d-bcf9-27946bd8d62f1611824554381-Kurta-Set.jpg" class="m-atom-round-img img-fluid" alt="">
            </div>
            <div class="col-4 col-md-2">
                <img src="http://assets.myntassets.com/dpr_1.5,q_60,w_400,c_limit,fl_progressive/assets/images/retaillabs/2021/1/28/85b47fa0-5e71-4f6d-bcf9-27946bd8d62f1611824554381-Kurta-Set.jpg" class="m-atom-round-img img-fluid" alt="">
            </div>
            <div class="col-4 col-md-2">
                <img src="http://assets.myntassets.com/dpr_1.5,q_60,w_400,c_limit,fl_progressive/assets/images/retaillabs/2021/1/28/85b47fa0-5e71-4f6d-bcf9-27946bd8d62f1611824554381-Kurta-Set.jpg" class="m-atom-round-img img-fluid" alt="">
            </div>
            

        </div>
    </div>
    </div>

</section>

Answer 1

BS5 附带了一大堆实用程序 classes.

如果您只想要中型和小型容器，请替换：

<div class="container m-organism-category">

与：

<div class="container-md m-organism-category">

或者，您也可以使用 container-float 表示大，container-md 表示中小：

<div class="container-float container-md m-organism-category">

如果您想完全摆脱容器，则需要重置基础 class CSS。使用以下 CSS:

@media (min-width: 992px) {
  .un-container {
    max-width: inherit;
    padding: inherit;
    margin: inherit;
  }
}

（将其放入 <STYLE> 标记或附加 CSS 文件中。）

然后 html 将是：

<div class="un-container container-md m-organism-category">

（如果你从 SCSS 编译然后使用 BS'mixins/_breakpoints.scss 中的 breakpoint-min 函数）

如何仅从大屏幕上删除 Bootstrap-container

How to remove Bootstrap-container only from large screen

html

css

bootstrap-5