在html输入中设置最大长度而不更改表单宽度?

我有一个注册表单,想将“名字”和“姓氏”字段的长度限制为50个字符。

问题是,当我这样做时,表单显示得更宽。

我如何确保用户在这些表单字段中输入的字符不能超过50个 没有 它会影响形状的宽度吗?

参考资料

这是之前和之后的代码/结果(唯一的变化是添加了 maxlength: 50 表单助手。

之前 :

<div class="row">
  <div class="col-6">

    <div class="field">
      <%= f.label :first_name %><br />
      <%= f.text_field :first_name, autofocus: true, autocomplete: "First Name", class: "form-control" %>
    </div>

  </div>

  <div class="col-6">
    <div class="field">
      <%= f.label :last_name %><br />
      <%= f.text_field :last_name, autocomplete: "Last Name", class: "form-control" %>
    </div>
  </div>
</div>
<br>

之后 (太宽):

<div class="row">
  <div class="col-6">

    <div class="field">
      <%= f.label :first_name %><br />
      <%= f.text_field :first_name, maxlength: 50, autofocus: true, autocomplete: "First Name", class: "form-control" %>
    </div>

  </div>

  <div class="col-6">
    <div class="field">
      <%= f.label :last_name %><br />
      <%= f.text_field :last_name, maxlength: 50, autocomplete: "Last Name", class: "form-control" %>
    </div>
  </div>
</div>
<br>