1

我有这个标记

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

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

示例图

实际图形

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

3 回答 3

0

就我个人而言，我会使用 flexbox 来实现你所追求的。

display:flex;在包含要显示为列而不是行的 div 的 div 上设置。然后设定他们的方向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/

于 2019-09-11T18:13:24.863 回答
0

您实际上是在告诉浏览器为每个视口设置三列。您必须将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>
于 2019-09-12T06:42:00.537 回答
0

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

<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>
于 2019-09-16T06:20:10.223 回答