如何解决平板电脑无法正确显示的col-md问题

Question

在全屏和移动设备上，范围面板（class =“ col-md-3”）正确显示，但在平板电脑上，左列被youtube图像面板覆盖（class =“ col-12 col-md-9” ）。

我为div样式尝试了多种配置，但是对Bootstrap CSS的了解不足。任何帮助将不胜感激。 www.topjocks.co.za/saddler /

           

在全屏模式下，左侧范围面板不应隐藏在youtube图像后面。

Answer 1

在这种情况下，使用适当的引导网格系统会有所帮助，因为您使用的图像较长，因此最好为不同的屏幕尺寸使用正确的列类

<div class="col-md-5 col-lg-3">
</div>

<div class="class="col-12 col-md-7 col-lg-9"">
</div>

这将有助于解决您网站上平板电脑的问题。 有关网格系统的更多信息 https://getbootstrap.com/docs/4.3/layout/grid/

Answer 2

在平板电脑模式下，您的范围图像比col-md-3长。这就是为什么它隐藏了图像的正确部分。

解决方案。 您可以将col-md-3调整为col-md-5，并将youtube div更改为col-md-7。