Уменьшение ширины ввода в булме

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>