Как исправить размер дисплея даты?

Question

<div class="input-group col-sm-3">
  <input id="date1" onkeypress="return isDateKey(event,this)" name="date1" class="form-control" data-toggle="datepicker-icon" date-picker>
  <a href="javascript:void(0);" class="input-group-prepend datepicker-trigger" style="text-decoration:none;">
    <div class="input-group-text" id="btnDt_Rec">
      <i class="fa fa-calendar-alt"></i>
    </div>
  </a>
</div>

Когда я перетаскиваю на размер планшета или телефона, указатель даты становится больше.

И то, что я хочу, это нормальный размер, как на картинке ниже:

Answer 1

Я думаю, что проблема заключается в выборе размера bootstrap столбца. col-sm-* изменит размер всего, что больше 576 пикселей. Я думаю, что ваш планшет не попадает в эту категорию. Попробуйте использовать col-* для чего-то меньшего. Если это не сработает, вы можете использовать flex.

Вот документация по последнему: https://getbootstrap.com/docs/4.1/utilities/flex/