时间戳

首页 > 解决方案 > 如何仅从大屏幕中删除 Bootstrap 容器

html - 如何仅从大屏幕中删除 Bootstrap 容器

问题描述

我想要中小型屏幕中的容器并且它工作正常。我只想从我的大屏幕上删除容器。我没有找到像 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>

标签： htmlcssbootstrap-5

解决方案

BS5 带有一大堆实用程序类。

如果您只需要中小型容器，请更换：

<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">

如果您想完全摆脱容器，则需要重置基类 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 编译，则使用breakpoint-minBS' 中的函数mixins/_breakpoints.scss）

推荐阅读