모바일보기의 텍스트 상자 깨는 컨테이너

Question

나는 반응 형 사용자 정의 프레임 워크를 사용했습니다. 모바일보기에서 (768px 해상도 이하) 텍스트 상자가 내 컨테이너를 깨뜨리고 있습니다. 그것은 컨테이너를 내리고 컨테이너 패딩을 고려하지 않습니다. 그것은 100 % 이상이 부모의의 작성

* { 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 : 여기

<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입니다 :

여기 내 HTML입니다. 이를 방지하려면 기본 content-box에서 border-box에 box-sizing 속성을 변경해야합니다

input { 
    box-sizing: border-box; 
} 

Edited Fiddle

그냥 상자 크기 조정 사용할 필요가

FURTHER READING