html - 使用百分比 (CSS/Bootstrap) 保持容器大小相等的最佳方法

Question

我有一个弹出窗口，在弹出窗口中有 2 个并排的 div。举个例子:

<div id="popup">
    <div id="parentContainer" style="display:inline; width:100%">
    <div id="childContainer" style="display:inline; width:50%">content</div>
    <div id="childContainer" style="display:inline; width:50%">content</div>
    </div>
</div>

大屏幕上的 div 将正常运行并在容器中并排放置。

我遇到的问题是，在手机上，当调整大小时，childContainers 的宽度相对于较小的屏幕变得相对较小，并且不会像在较大的屏幕中那样填充弹出窗口的宽度。

我如何确保如果 div 进入弹出窗口父容器中的新行，它会占用新行的宽度。谢谢

Answer 1

您可以使用 Bootstrap 的列类将内容移动到较小设备上的新行。在下面的示例中，父容器的宽度始终为 100%，具体取决于弹出窗口的宽度。在您设备的像素宽度小于 768 像素之前，子容器将具有 50% 的宽度。低于该像素宽度的设备将导致子容器占据 100% 的宽度，并显示在行中。

<div id="popup">
    <div id="parentContainer" class="col-xs-12">
        <div id="childContainerA" class="col-sm-6 col-xs-12">Content A</div>
        <div id="childContainerB" class="col-sm-6 col-xs-12">Content B</div>
    </div>
</div>