CSS Grid 2 列不在正确的位置

Question

我有以下示例 Jsfiddle我在其中发布了所有 12 列和所需的 CSS。下一段代码我认为是导致问题的代码。在实际示例中，您会注意到这两列小于 320 像素的屏幕宽度会破坏容器并出现滚动条。我已经尝试解决这个问题，但到目前为止我还没有找到解决方案。身边有谁可以帮帮我吗？

<div class="col-mb-2 col-8 col-dt-5"><p>&nbsp;</p></div>
<div class="col-mb-2 col-2 col-dt-8"><p>&nbsp;</p></div>

更新:加了一张图看问题的部分

Answer 1

所以你需要写媒体查询

@media (max-width:312px) {

.col-dt-5, .col-dt-8{padding:0px 2px !important}


} 

(max-width:312px) 表示屏幕宽度小于或等于312px