html - 移动 View 中的文本框破坏容器

Question

我已经使用我的自定义框架来响应。在移动 View 中，小于(768 像素分辨率)的文本框破坏了我的容器。它超出容器范围，不考虑容器填充。

这是我的 html:

<div class="container">
<div class="col-3">
<input type="text" />
</div>

<div class="col-3">
<input type="text" />
</div>

<div class="col-3">
<input type="text" />
</div>
</div>

这是 CSS:

* { margin:0px; padding:0px; }
.container { width:1170px; margin:0px auto;  }
.col-3 { float:left; width:30%; margin-right:3%; background:#CCC;  }
input { border:0px none; background:#333; height:30px; line-height:30px; width:100%; color:#FFF; padding:0px 10px; }

@media (max-width:767px)
{
.container { width:auto; padding:0px 10px; }
.col-3 { float:none; width:100%; margin-bottom:10px }
}

FIDDLE LINK

Answer 1

你必须只使用 box-sizing: border-box;在您的输入 CSS 文件中。

所以你的代码将是:

<div class="container">
<div class="col-3">
<input type="text" />
</div>

<div class="col-3">
<input type="text" />
</div>

<div class="col-3">
<input type="text" />
</div>
</div>

CSS:

* { margin:0px; padding:0px; }
.container { width:1170px; margin:0px auto;  }
.col-3 { float:left; width:30%; margin-right:3%; background:#CCC;  }
input { border:0px none; background:#333; height:30px; line-height:30px; width:100%; color:#FFF; padding:0px 10px; box-sizing: border-box; }

@media (max-width:767px)
{
.container { width:auto; padding:0px 10px; }
.col-3 { float:none; width:100%; margin-bottom:10px }
}