css - 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) 表示，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但没有奏效。

看这个：演示