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

Question

我有一个弹出窗口，在弹出窗口中有两个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%。子容器将有50%的宽度，直到你的设备的像素宽度为<768 px。低于该像素宽度的设备将导致子容器占用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>