移動視圖中打破容器的文本框

Question

我已經使用自定義框架進行響應。 在移動視圖中，小於（768px分辨率）的文本框正在打破我的容器。它放在容器的外面，不考慮容器填充。

這裏是我的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

你必須只使用盒大小：邊界盒;在你的輸入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 } 
} 

Answer 2

你輸入寬度是目前100% + padding使得它的父超過100％。爲了防止這種情況，你需要將box-sizing屬性從默認content-box更改爲border-box：

input { 
    box-sizing: border-box; 
} 

Edited Fiddle

FURTHER READING