减小布尔输入的输入宽度

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>