asp.net Bootstrap - 响应式卡片嵌套在容器卡片中

Question

我有这个标记

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

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

example drawing

actual graphic

编辑： 有了这个标记，我几乎就到了我想要的地方，最后要弄清楚的是如何设置所有内部卡片在两种情况下始终适应可用的水平space：基本上当它们在一行时它们应该有每个宽度=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>

Answer 1

就我个人而言，我会使用 flexbox 来实现您想要的。

在包含要显示为列而不是行的 div 的 div 上设置 display: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：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

您实际上是在告诉浏览器为每个视口设置三列。您必须将 col-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>

Answer 3

我最终得到了这个，它运行良好，如我所愿

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

asp.net Bootstrap - 响应式卡片嵌套在容器卡片中

asp.net Bootstrap - responsive cards nested in a container-card

asp.net

twitter-bootstrap

bootstrap-4

bootstrap-cards