Html 使用百分比保持容器大小相等的最佳方法（CSS/引导）

我有一个弹出窗口，在弹出窗口中有两个并排的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将正常工作，并排在容器中

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

---

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

您可以使用Bootstrap的列类将内容移动到较小设备上的新行。在下面的示例中，基于弹出窗口的宽度，父容器的宽度始终为100%。在设备像素宽度小于768px之前，子容器的宽度将为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>

内容A
内容B

您的

index.html

文件的

部分中有

吗？是的，我有，看起来是这样的：很有效，谢谢。如何增加列的宽度？这些列的宽度由其父div的宽度决定。宽度百分比可以通过更改col类末尾的数字来更改。示例如下：