Question

当前，我正在从事电子商务部分，因此将有一个包含过滤器的边和一个“主”边，该“主”必须在单个卡中包含6个项目。问题在于，当它在移动屏幕上显示时，将其放在一边（去掉），主机应使用屏幕的所有网格以及该部分的一半（每行2张）。

问题是我不知道如何不修改卡片的种类就怎么做，因为在更大的屏幕上（例如iPad或类似设备），内容已经可以响应了。

我已经尝试在列中使用一组不同的网格类组合，如下面的代码所示

<div class="row mr-5">
    <div class="col-4 col-lg-4 col-md-5" id="aside-categoria">
         // Here goes the aside that I already hidde with media queries
    </div>

    <div class="col-8 col-lg-8 col-md-7 col-sm-12" id="content-categoria">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 col-md-12 col-sm-12">
                    <a href="#" class="custom-card">
                        <div class="card categoria-image">
                            <img src="images/landing/categoria/galeria-escritorio-apolo.jpg" class="border border-dark image-responsive" alt="Imagen Representativa de producto">
                            <div class="card-body pl-0">
                                <h1>Nombre Producto</h1>
                                <small>Ambiente</small>
                            </div>
                        </div>
                    </a>
                </div>
                // Here goes 2 more columns like the one above
            </div>
            <div class="row">
                <div class="col-lg-4 col-md-12 col-sm-12">
                    <a href="#" class="custom-card">
                        <div class="card categoria-image">
                            <img src="images/landing/categoria/galeria-escritorio-apolo.jpg" class="border border-dark image-responsive" alt="Imagen Representativa de producto">
                            <div class="card-body pl-0">
                                <h1>Nombre Producto</h1>
                                <small>Ambiente</small>
                            </div>
                        </div>
                    </a>
                </div>
                // Here goes 2 more columns like the one above
            </div>
        </div>
    </div>
</div>

结果必须如下图所示，其中我画一条线必须是另一张产品卡。

https://prnt.sc/nyj06y

您可以在此处查看页面的当前状态：https://demos.posicionart.com/silleri/categoria.php

Answer 1

您的代码中有太多错误，为了实现您的目标，我进行了一些更改。

这些是您可以看到差异https://www.diffchecker.com/gVGBN0OY

的链接

<div class="row mr-md-5">
    <div class="col-4 col-lg-4 col-md-5" id="aside-categoria">
         // Here goes the aside that I already hidde with media queries
    </div>

    <div class="col-12 col-md-7 col-lg-8" id="content-categoria">
        <div class="container">
            <div class="row">
                <div class="col-6 col-sm-12 col-lg-4">
                    <a href="#" class="custom-card">
                        <div class="card categoria-image">
                            <img src="images/landing/categoria/galeria-escritorio-apolo.jpg" class="border border-dark image-responsive" alt="Imagen Representativa de producto">
                            <div class="card-body pl-0">
                                <h1>Nombre Producto</h1>
                                <small>Ambiente</small>
                            </div>
                        </div>
                    </a>
                </div>
                // Here goes 2 more columns like the one above
            </div>
            <div class="row">
                <div class="col-6 col-sm-12 col-lg-4">
                    <a href="#" class="custom-card">
                        <div class="card categoria-image">
                            <img src="images/landing/categoria/galeria-escritorio-apolo.jpg" class="border border-dark image-responsive" alt="Imagen Representativa de producto">
                            <div class="card-body pl-0">
                                <h1>Nombre Producto</h1>
                                <small>Ambiente</small>
                            </div>
                        </div>
                    </a>
                </div>
                // Here goes 2 more columns like the one above
            </div>
        </div>
    </div>
</div>

如果将此代码放在CODE中，肯定可以使用

引导程序4：在移动屏幕上重新排列内部堆叠的列

1 个答案: