Блог

У меня есть ввод, определенный таким образом с помощью Bulma:

 <div class="field is-horizontal">
  <div class="field-label is-normal">
    <label class="label">
      <span>Quantity</span>
      <sup class="has-text-danger">*</sup>
    </label>
  </div>  
  <div class="field-body">
    <div class="field">
      <div class="control">
        <input class="input" max="4" min="1" placeholder="Enter the quantity" required type="number"/>
      </div>
    </div>
  </div>
</div>
  

На рабочем столе он выглядит так, как и должен; то есть он расширен и заполняет ширину:

На рабочем столе

Но на мобильном устройстве он сильно уменьшается. Я бы сказал, слишком много. Несмотря на то, что по ширине достаточно места для заполнения.

На мобильном устройстве

Похоже, что max="x" атрибут имеет к этому какое-то отношение. Потому что, когда я удаляю max="x" , это снова выглядит как на рабочем столе. Как заставить его заполнить доступную ширину, не удаляя max="x" ?