Bootstrap 4.4.1小视口下如何通过工具类缩小按钮与输入组？

Great question! Copying Bootstrap's styles manually is definitely a fragile approach—you're right that you might miss properties, and it'll be a pain to update if Bootstrap ever changes those styles. Here are a few cleaner, more maintainable solutions to achieve what you want:

方案1：利用Bootstrap Sass混入（推荐，若项目使用Sass编译） #

Bootstrap 4's components are built with Sass mixins and variables, so you can directly reuse those instead of copying raw CSS. This ensures you'll never miss any properties and stays in sync with Bootstrap's updates.

@media (max-width: 576px) {
  // 复用Bootstrap内置的按钮尺寸混入
  .btn:not(.btn-sm):not(.btn-lg) {
    @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
  }

  // 复用输入组的尺寸混入
  .input-group:not(.input-group-sm):not(.input-group-lg) {
    @include input-group-size($input-group-padding-y-sm, $input-group-padding-x-sm, $input-group-font-size-sm, $input-group-line-height-sm, $input-group-border-radius-sm);
  }
}

The :not() selectors ensure you don't override any explicitly set .btn-sm/.btn-lg or .input-group-sm/.input-group-lg classes.

方案2：纯CSS自定义响应式工具类 #

If you're working with plain CSS (no Sass), create semantic utility classes that only apply small sizing on extra-small screens. This avoids modifying global .btn/.input-group styles directly:

@media (max-width: 576px) {
  .btn-xs-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 0.2rem;
  }

  .input-group-xs-sm > .custom-select, 
  .input-group-xs-sm > .form-control:not(textarea) {
    height: calc(1.5em + 0.5rem + 2px);
  }

  .input-group-xs-sm > .custom-select, 
  .input-group-xs-sm > .form-control, 
  .input-group-xs-sm > .input-group-append > .btn, 
  .input-group-xs-sm > .input-group-append > .input-group-text, 
  .input-group-xs-sm > .input-group-prepend > .btn, 
  .input-group-xs-sm > .input-group-prepend > .input-group-text {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 0.2rem;
  }

  .input-group-xs-sm > .custom-select {
    padding-right: 1.75rem;
  }
}

Then add these classes to your elements:

<button class="btn btn-xs-sm">Submit</button>
<div class="input-group input-group-xs-sm">...</div>

方案3：JavaScript动态切换内置类 #

If you want to avoid writing any custom CSS entirely, use JavaScript to toggle Bootstrap's built-in .btn-sm and .input-group-sm classes based on screen size. Add a debounce to prevent excessive calls during resizing:

let resizeTimeout;

function toggleSmallComponents() {
  clearTimeout(resizeTimeout);
  resizeTimeout = setTimeout(() => {
    const isXsScreen = window.innerWidth <= 576;

    // Toggle btn-sm on regular buttons
    document.querySelectorAll('.btn:not(.btn-sm):not(.btn-lg)').forEach(btn => {
      btn.classList.toggle('btn-sm', isXsScreen);
    });

    // Toggle input-group-sm on regular input groups
    document.querySelectorAll('.input-group:not(.input-group-sm):not(.input-group-lg)').forEach(group => {
      group.classList.toggle('input-group-sm', isXsScreen);
    });
  }, 100);
}

// Initialize on page load
toggleSmallComponents();
// Listen for window resize
window.addEventListener('resize', toggleSmallComponents);

This approach uses Bootstrap's native classes directly, so you'll get all their styles without any manual copying.

内容的提问来源于stack exchange，提问作者Gideon