如何在MaterializeCSS中调整响应表单的输入字段宽度？

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

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

针对本部分中的s12：

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

从物化表单组件：

@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中，表单的大小看起来比在mobile上稍微好一些。但仍然存在问题，因为我希望输入字段的宽度更长。请参阅代码笔和图片作为参考

---

问题是您提供了太多的

行

div。这会在左侧和右侧添加

15px

的边沟

只需使用一个

容器

div和一个

行

div即可解决问题

名字
姓
电子邮件
评论
提交

请提供JSFIDLE，这将节省我们回答问题的时间。谢谢！这很有效，现在一切都在正确调整大小。不客气。请把答案也投上去。非常感谢。

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

    <div class="container">
      <div class="row">
          <form class="col s12">
              <div class="input-field col s12  l6">
                <input id="first_name" type="text" class="validate">
                <label for="first_name">First Name</label>
              </div>
              <div class="input-field col s12 l6">
                <input id="last_name" type="text" class="validate">
                <label for="last_name">Last Name</label>
              </div>
            <div class="input-field col s12">
              <input id="email" type="email" class="validate">
              <label for="email">Email</label>
            </div>
              <div class="input-field col s12">
                <textarea id="textarea1" class="materialize-textarea">
                </textarea>
                <label for="textarea1">Comments</label>
              </div>
            <a class="waves-effect waves-light btn">Submit</a>
          </form>
        </div>
       </div>