asp.net引导-嵌套在容器卡中的响应卡

我有这个标记

<div class="container-fluid p-4" style="margin-right: 0px; margin-left: 0px; margin-top: -30px;" id="divUtility" runat="server">
<div class="card bg-secondary">
<div class="card-header text-white ">
</div>
<div class="row card-body">
   <div id="divCantieri" runat="server" class="col-sm-4 bg-secondary">
   ...
   </div>
   <div id="divImporta" runat="server" class="col-sm-4 bg-secondary">
   ...
   </div>
   <div id="divBatch" runat="server" class="col-sm-4 bg-secondary">
   ...
   </div>
   <div id="divCausali" runat="server" class="col-sm-4 bg-secondary">
   ...
   </div>
</div>
</div>
</div>

...
...
...
...

我所面临的问题是，大卡片中的嵌套卡片没有响应能力，因此当我在桌面上使用该站点时，我会看到它们一排接一排地出现在同一行上，如果我使用智能手机，我会看到它们仍然在线，但缩小了。在智能手机上时，我希望它们显示为一列。我怎样才能做到这一点？谢谢

编辑： 有了这个标记，我几乎达到了我想要的程度，最后要弄清楚的是如何设置所有内部卡，使其始终适应两种情况下的可用水平空间：基本上，当它们位于一行时，它们的每个宽度应为33%，但当位于一列时，宽度应为100%

<div id="divUtility" class="container-fluid p-4" style="margin-right: 0px; margin-left: 0px; margin-top: -30px;">
            <div class="card bg-secondary">
                <div class="card-header text-white ">
                ...
                </div>
                <div class="card-body" style="display:flex; flex-direction:row; flex-wrap:wrap;">
                        <div id="divCantieri" class="card mr-3 mt-2 mb-2" style="min-width:30em;">
                            <div class="card-header bg-light">
                             ...
                            </div>
                            <div class="card-body scroll" style="max-height: 10em;">
                            ...
                            </div>
                        </div>
                        <div id="divImporta" class="card mr-3 mt-2 mb-2" style="min-width:30em;">
                            <div class="card-header bg-light">
                             ...
                            </div>
                            <div class="card-body scroll" style="max-height: 10em;">
                             ...
                            </div>
                        </div>
                        <div id="divBatch" class="card mr-3 mt-2 mb-2" style="min-width:30em;">
                            <div class="card-header bg-light">
                             ...
                            </div>
                            <div class="card-body scroll" style="max-height: 10em;">
                             ...
                            </div>

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

...
...
...
...
...
...
...

就个人而言，我会使用flexbox来实现您的目标

设置

显示：flex。然后使用
flex direction:row设置它们的方向以及它们是否将使用
flex wrap:wrap进行包装

<div class="row card-body" style="display:flex; flex-direction:row; flex-wrap:wrap;">
    <div id="divCantieri" runat="server" class="col-sm-4 bg-secondary">
        ...
    </div>
    <div id="divImporta" runat="server" class="col-sm-4 bg-secondary">
        ...
    </div>
    <div id="divBatch" runat="server" class="col-sm-4 bg-secondary">
        ...
    </div>
    <div id="divCausali" runat="server" class="col-sm-4 bg-secondary">
        ...
    </div>
</div>


...
...
...
...

这里有一个很好的参考资料，帮助我理解flexbox:
就我个人而言，我会使用flexbox来实现您的目标

设置
显示：flex。然后使用
flex direction:row设置它们的方向以及它们是否将使用
flex wrap:wrap进行包装

<div class="row card-body" style="display:flex; flex-direction:row; flex-wrap:wrap;">
    <div id="divCantieri" runat="server" class="col-sm-4 bg-secondary">
        ...
    </div>
    <div id="divImporta" runat="server" class="col-sm-4 bg-secondary">
        ...
    </div>
    <div id="divBatch" runat="server" class="col-sm-4 bg-secondary">
        ...
    </div>
    <div id="divCausali" runat="server" class="col-sm-4 bg-secondary">
        ...
    </div>
</div>


...
...
...
...

这里有一个很好的参考资料帮助我理解flexbox:
您实际上是在告诉浏览器为每个视图端口设置三列。您必须将列sm设置为12，以使每个div占据整行

<div class="row card-body">
   <div id="divCantieri" runat="server" class="col-sm-12 col-md-4 bg-secondary">
       ...
   </div>
   <div id="divImporta" runat="server" class="col-sm-12 col-md-4 bg-secondary">
       ...
   </div>
   <div id="divBatch" runat="server" class="col-sm-12 col-md-4 bg-secondary">
       ...
   </div>
   <div id="divCausali" runat="server" class="col-sm-12 col-md-4 bg-secondary">
       ...
   </div>
</div>


...
...
...
...
您实际上是在告诉浏览器为每个视口设置三列。您必须将列sm设置为12，以使每个div占据整行

<div class="row card-body">
   <div id="divCantieri" runat="server" class="col-sm-12 col-md-4 bg-secondary">
       ...
   </div>
   <div id="divImporta" runat="server" class="col-sm-12 col-md-4 bg-secondary">
       ...
   </div>
   <div id="divBatch" runat="server" class="col-sm-12 col-md-4 bg-secondary">
       ...
   </div>
   <div id="divCausali" runat="server" class="col-sm-12 col-md-4 bg-secondary">
       ...
   </div>
</div>


...
...
...
...
我最终得到了这个，它工作得很好，正如我所希望的那样

<div class="card-body">
                    <div class="row">
                        <div id="divCantieri" runat="server" class="col-xl-4 mb-3">
                            <div class="card">
                                <div class="card-header bg-light">
                                </div>
                                <div class="card-body scroll" style="max-height: 10em;">
                                </div>
                            </div>
                        </div>
                        <div id="divImporta" runat="server" class="col-xl-4 mb-3">
                        <div class="card">
                                <div class="card-header bg-light">
                                </div>
                                <div class="card-body" style="max-height: 10em;">
                                </div>
                            </div>
                        </div>
                        <div id="divBatch" runat="server" class="col-xl-4 mb-3">
                            <div class="card">
                                <div class="card-header bg-light">
                                </div>
                                <div class="card-body scroll" style="max-height: 10em;">
                                </div>
                                <div class="card-footer">
                                </div>
                            </div>
                        </div>
                        <div id="divCausali" visible="false" runat="server" class="col-xl-4 mb-3">
                            <div class="card">
                                <div class="card-header bg-light">
                                </div>
                                <div class="card-body scroll" style="max-height: 10em;">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

我最终得到了这个，它工作得很好，正如我所希望的那样

<div class="card-body">
                    <div class="row">
                        <div id="divCantieri" runat="server" class="col-xl-4 mb-3">
                            <div class="card">
                                <div class="card-header bg-light">
                                </div>
                                <div class="card-body scroll" style="max-height: 10em;">
                                </div>
                            </div>
                        </div>
                        <div id="divImporta" runat="server" class="col-xl-4 mb-3">
                        <div class="card">
                                <div class="card-header bg-light">
                                </div>
                                <div class="card-body" style="max-height: 10em;">
                                </div>
                            </div>
                        </div>
                        <div id="divBatch" runat="server" class="col-xl-4 mb-3">
                            <div class="card">
                                <div class="card-header bg-light">
                                </div>
                                <div class="card-body scroll" style="max-height: 10em;">
                                </div>
                                <div class="card-footer">
                                </div>
                            </div>
                        </div>
                        <div id="divCausali" visible="false" runat="server" class="col-xl-4 mb-3">
                            <div class="card">
                                <div class="card-header bg-light">
                                </div>
                                <div class="card-body scroll" style="max-height: 10em;">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


引导基于每行12列。您的列加起来是16列。@pcalkins这意味着每个div将占用4列，如果它们换行，则可以超过12列。引导基于每行12列。您的列加起来是16列。@pcalkins这只是意味着每个div将占用4列，如果它们换行，则可以超过12列。没有任何变化，内部卡仍会压缩较小的分辨率。尝试了一些之后，如果我将内部div类更改为“card mr-3 mt”，我就快到了-