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％的宽度，直到您的设备的像素宽度<1。 768px。低于该像素宽度的设备将导致子容器占据宽度的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>

使用百分比保持容器大小相同的最佳方法（CSS / Bootstrap）

1 个答案: