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

您的输入宽度目前为100% + padding，使其超过其父级的100％。为防止出现这种情况，您需要将box-sizing属性更改为默认border-box中的content-box：

input {
    box-sizing: border-box;
}

Edited Fiddle

FURTHER READING

Answer 2

你必须使用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 }
}

在移动视图中打破容器的文本框

2 个答案: