在Bootstrap中设置两个水平div，在移动模式下只有一个是全宽的

Question

我正在向Opencart添加一些自定义的HTML。我需要一个我们的条款，隐私政策等在一个div的一边无序列表，然后在另一边的div的“时事通讯注册”图像。

我有“时事通讯注册”设置为响应式图像，但它在移动时看起来不正确，所以我宁愿它不在那里，只是让条款跨越整个容器。

如何创建2个div (每个div占页面的50%)，使左侧div在移动端变成全宽(xs)？

Answer 1

除了在移动设备上隐藏图像之外，左列div还必须具有正确的类，以便在xs屏幕上扩展到全宽。假设您正在使用bootstrap进行布局，您可能需要如下所示：

<div class="col-xs-12 col-sm-6">
    *terms content*
</div>
<div class="col-sm-6 hidden-xs">
    <img src="XYZ" />
 </div>

这将为您提供两列，在屏幕上的宽度分别为50%或更小或更高。左列将在xs屏幕上跨越12列，而右列将被隐藏。

Answer 2

如果我没理解错的话，你需要做的就是将"hidden-xs“类添加到你想要在移动设备上消失的第二个div中。您可以使用"hidden-sm“在较高的视口宽度处隐藏div。因为我看不到你的代码，所以我不能确定，但本质上：

<div class="hidden-xs"></div>

此外，您可能需要在每个div上使用“col sm-6”或类似的东西，以便在BS上更好地利用网格系统(如果您还没有)。