Размер ввода меньше, чем "form-control-sm" в начальной загрузке 4, например. хз?

Question

Есть ли класс, который можно использовать для определения размера выпадающих списков, полей ввода и т. Д. С чем-то меньшим, чем form-control-sm? Я ничего не вижу, так что нужен специальный класс?

Я использую cdn для начальной загрузки css и хочу использовать размер шрифта по умолчанию 0,75em для всего текста, но входные данные начальной загрузки отображаются на 0,875em.

Какой хороший способ переопределить это и привести их в соответствие?

Answer 1

Тебе придётся пойти обычным путем

Хорошим способом может быть сокращение других вещей в дополнение к сокращению размера шрифта с 0,875em до 0,75em; это будет включать в себя высоту, заполнение тоже.

  .form-control-xs {
    height: calc(1em + .375rem + 2px) !important;
    padding: .125rem .25rem !important;
    font-size: .75rem !important;
    line-height: 1.5;
    border-radius: .2rem;
}

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<div class="container">
  <h2>Form Control Sizing</h2>
  <p>Change the size of the form control with .form-control-sm or .form-control-lg:</p>
  <form action="/action_page.php">
    <div class="form-group">
      <input type="text" class="form-control form-control-xs" placeholder="Extra small form control" name="text0">
    </div>
    <div class="form-group">
      <input type="text" class="form-control form-control-sm" placeholder="Small form control" name="text1">
    </div>
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Default form control" name="text2">
    </div>
    <div class="form-group">
      <input type="text" class="form-control form-control-lg" placeholder="Large form control" name="text3">
    </div>

  </form>
</div>