减少bulma中输入的输入宽度

Question

我很难减小输入宽度并使其具有响应性。现在，我的表单如下所示：

如您所见，输入具有全宽。我尝试将width:33% 和textAlign: "center" 的样式赋予父级，但没有成功。我只是希望表单居中且响应迅速。

---

这是代码。

<div className="field">
  <p className="control has-icons-left has-icons-right">
    <input
      onChange={this.handleChange}
      name="username"
      value={this.state.username}
      className="input is-rounded"
      type="text"
      placeholder="Username"
    />
    <span className="icon is-small is-left">
      <i className="fas fa-user"></i>
    </span>
    <span className="icon is-small is-right">
      <i className="fas fa-check"></i>
    </span>
  </p>
</div>

Answer 1

您应该将输入字段包装在宽度控制如下的列中；

<div class="column is-3">

      <!-- your code here -->

</div>