如何在MaterialiseCSS中调整响应形式的输入字段宽度？

Question

为移动设备调整大小时，输入字段宽度太短。 （在iOS上观看）

我查看了各个Materialize组件的CSS文件，并尝试在自定义css文件中调整@media的％，但它似乎没有改变任何东西。这就是我为移动设备定制容器类所做的。我还尝试通过在自定义css文件中链接多个类来硬编码输入字段（以像素为单位），但是存在着使表单居中的问题。

在这个div中瞄准s12：

<div class="input-field col s12 m6 l6">

custom.scss

.input-field.col.s12 { width: 200px; } 

来自Materialise表单组件：

@media only screen and (max-width: 600px) {
.input-field .prefix ~ input {
width: 80%;
width: calc(100% - 3rem); } }

我将宽度设置为前一个代码块的100％。

@media only screen and (max-width: 600px) {
.input-field .prefix ~ input {
width: 100%; } }

我附上了现在的样子。

感谢您就如何解决此问题提出任何建议。

在这里添加了codepen： https://codepen.io/prismcolour/pen/zdWEKo

表单在codepen中的调整大小比在移动设备上稍微好一些。但仍然有问题，因为我希望输入字段宽度更长。请参阅codepen和图片作为参考。

Answer 1

问题是你提供的.sh div太多了。这会在左右两侧添加row的装订线。

只需使用一个15px div和一个container div。这将解决您的问题。

Codepen Solution

row