如何实现Krajee File-input按钮等距填充且适配响应式？

嘿，我来帮你搞定这个按钮宽度适配的问题！先把你当前的代码整理成更清晰的格式：

<!-- CSS 依赖 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.1/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" crossorigin="anonymous">

<!-- HTML 结构 -->
<div class="file-loading">
  <input id="input-b6" name="input-b6[]" type="file" multiple="multiple"/>
</div>

<!-- JS 依赖 -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.1/js/plugins/piexif.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.1/js/plugins/sortable.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.1/js/plugins/purify.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.1/js/fileinput.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.1/themes/fas/theme.min.js"></script>

<!-- 初始化脚本 -->
<script>
$(document).ready(function () { 
  $("#input-b6").fileinput({ 
    theme: "explorer", 
    dropZoneEnabled: true, 
    maxFileCount: 10, 
    showDrag: false, 
    showUploadedThumbs: true, 
    hideThumbnailContent: true, 
    browseLabel: "Attach", 
    browseClass: "btn btn-primary buttonCss", 
    uploadClass: "btn btn-primary buttonCss", 
    removeClass: "btn btn-primary buttonCss", 
    removeErrorClass: 'btn btn-primary buttonCss', 
    showCaption: false, 
    initialPreviewAsData: true, 
    uploadUrl: 'null', 
    uploadAsync: true, 
    elPreviewContainer: '#banner_default', 
    elPreviewImage: '#file-preview-thumbnails', 
    msgSizeTooLarge: "This file is larger than {size} KB, please upload to UCR", 
    layoutTemplates: { 
      main2: '{preview}\n<div class="kv-upload-progress hide"></div>\n' + 
             ' <div class="input-group-btn">\n' +
             '{browse}\n{upload}\n{remove}\n', 
      actionDelete: '<button type="button" class="kv-file-remove {removeClass} removeBtnCss" title="{removeTitle}"{dataUrl}{dataKey}>{removeIcon}</button>\n', 
      actions: '<div class="file-actions">\n' + 
               '<div class="file-footer-buttons">\n' + 
               '<div class="dropdown">\n' + 
               '<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\n' + 
               '<span class="caret"></span></button>\n' + 
               '<ul class="dropdown-menu pull-right">\n' + 
               '<li><a href="#">{upload} Upload</a></li>\n' + 
               '<li><a href="#">{delete} Remove</a></li>\n' + 
               '<li><a href="#">{zoom} Preview</a></li>\n' + 
               '</ul>\n' + 
               '</div>\n' + 
               '</div>\n', 
      actionZoom: '<button type="button" class="{zoomClass}" title="{zoomTitle}" onclick="openNewWindow(event)">{zoomIcon}</button>', 
    }, 
  }); 
})
</script>

针对你提到的按钮填充页面宽度且适配不同屏幕的需求，我们可以通过自定义CSS轻松实现，核心用Flex布局来做响应式分配：

解决方案：自定义CSS样式 #

把这段CSS加到你的页面里（可以放在<style>标签中，或者外部CSS文件）：

/* 给按钮容器设置Flex布局，让按钮自动分配空间 */
.input-group-btn {
  display: flex;
  width: 100%;
  gap: 0.5rem; /* 按钮之间的间距，可根据你的视觉需求调整 */
}

/* 让每个按钮平分容器宽度，填充整个可用空间 */
.input-group-btn .btn {
  flex: 1;
  white-space: nowrap; /* 防止按钮文字换行，保证按钮内文字完整显示 */
}

/* 小屏幕设备优化（手机等窄屏） */
@media (max-width: 576px) {
  .input-group-btn .btn {
    font-size: 0.8rem;
    padding: 0.5rem 0.75rem;
  }
}

代码说明： #

1. display: flex：让按钮容器变成Flex容器，内部按钮可以灵活排列和分配空间。
2. flex: 1：每个按钮会自动占据容器内的等份空间，不管屏幕宽还是窄，都能填满整个容器宽度。
3. gap：给按钮之间设置固定间距，避免按钮挤在一起，提升视觉舒适度。
4. 媒体查询：针对小屏幕调整按钮的字体大小和内边距，确保在手机上按钮不会显得过大或文字溢出。

额外优化：底部操作栏按钮适配 #

如果你还想优化底部文件操作栏的下拉按钮，让它也填充对应宽度，可再加这段CSS：

.file-footer-buttons .dropdown {
  width: 100%;
}

.file-footer-buttons .dropdown-toggle {
  width: 100%;
  justify-content: center;
}

这样底部的操作按钮也能和顶部按钮保持一致的响应式效果啦！

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