CSS Grid 2列位置不正确

Question

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

<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）表示，scree的宽度为312px或更小

Answer 2

我认为问题在于这个课程：

.testgrid p {
background: #5d68c2;
margin-bottom: 2em;
font-size: 0.75em;
line-height: 1em;
padding: 1em;    /*   <--- this is the problem   */
color: #ffffff;
text-transform: uppercase;
font-weight: 800;
font-family: "Open Sans", Helvetica, Arial, Sans-serif
}

您需要删除左右padding：

.testgrid p {
  background: #5d68c2;
  margin-bottom: 2em;
  font-size: 0.75em;
  line-height: 1em;
  padding: 1em 0px;   /*   updated   */
  color: #ffffff;
  text-transform: uppercase;
  font-weight: 800;
  font-family: "Open Sans", Helvetica, Arial, Sans-serif;
}

我试过box-sizing但没有效果。

查看此内容：DEMO