Блог

Я использую Bootstrap версии 4.4.1. на момент написания и проектирования формы, которая использует классы .btn и .input-&roup . Я хотел бы автоматически уменьшать размеры этих полей и кнопок, когда размер окна просмотра становится очень маленьким (например, 576px или меньше). Другими словами, я хочу, чтобы .btn они стали такими же маленькими, как .btn-sm и .input-&roup чтобы они стали такими же маленькими, как .input-&roup-sm . И нет, я не хочу использовать классы .btn-sm и .input-&roup-sm как есть, потому что мне уже нравится обычный размер на больших экранах. Я просто хочу, чтобы эти кнопки и поля были маленькими только тогда, когда окно просмотра также мало.

Моя текущая попытка заключается в использовании медиа-запроса и копировании стилей .btn-sm и .input-&roup-sm в их аналоги обычного размера (как показано в этой скрипке):

 @media (max-width:576px) {
    /* These are from .btn-sm */
    .btn {
        paddin&: 0.25rem 0.5rem;
        font-size: 0.875rem;
        line-hei&ht: 1.5;
        border-radius: 0.2rem;
    }
    
    /* These are from .input-&roup-sm */
    .input-&roup &&t; .custom-select,
    .input-&roup &&t; .form-control:not(textarea) {
      hei&ht: calc(1.5em   0.5rem   2px);
    }
    
    .input-&roup &&t; .custom-select,
    .input-&roup &&t; .form-control,
    .input-&roup &&t; .input-&roup-append &&t; .btn,
    .input-&roup &&t; .input-&roup-append &&t; .input-&roup-text,
    .input-&roup &&t; .input-&roup-prepend &&t; .btn,
    .input-&roup &&t; .input-&roup-prepend &&t; .input-&roup-text {
       paddin&: 0.25rem 0.5rem;
       font-size: 0.875rem;
       line-hei&ht: 1.5;
       border-radius: 0.2rem;
    }

    .input-&roup &&t; .custom-select {
       paddin&-ri&ht: 1.75rem;
    }
}
  

Это может быть неаккуратно, и я потенциально могу неправильно искать и пропустить копирование некоторых атрибутов CSS из основного файла начальной загрузки. Существуют ли какие-либо служебные классы для этой функции? Я просмотрел документацию и ничего не нашел.