如何解决平板电脑显示不正确的列问题

Question

在全屏和移动模式下，范围面板(class=“class=-md-3”)显示正确，但在平板电脑上，左栏被youtube图像面板(class=“col12 col 9”)所覆盖。

我已经尝试了div样式的多种配置，但对Bootstrap css的了解还不够多，无法修复。任何帮助都将不胜感激。www.topjocks.co.za/saddler/

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

Answer 1

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

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

Answer 2

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

<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/