javascript - 平均分开按钮间距并做出响应
问题描述
$(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>',
actionZoom: '<button type="button" class="{zoomClass}" title="{zoomTitle}" onclick="openNewWindow(event)">{zoomIcon}</button>',
},
});
})
<!-- bootstrap 4.x is supported. You can also use the bootstrap css 3.3.x versions -->
<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" />
<!-- if using RTL (Right-To-Left) orientation, load the RTL CSS file after fileinput.css by uncommenting below -->
<!-- link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.1/css/fileinput-rtl.min.css" media="all" rel="stylesheet" type="text/css" /-->
<!-- the font awesome icon library if using with `fas` theme (or Bootstrap 4.x). Note that default icons used in the plugin are glyphicons that are bundled only with Bootstrap 3.x. -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<!-- piexif.min.js is needed for auto orienting image files OR when restoring exif data in resized images and when you
wish to resize images before upload. This must be loaded before fileinput.min.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.1/js/plugins/piexif.min.js" type="text/javascript"></script>
<!-- sortable.min.js is only needed if you wish to sort / rearrange files in initial preview.
This must be loaded before fileinput.min.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.1/js/plugins/sortable.min.js" type="text/javascript"></script>
<!-- purify.min.js is only needed if you wish to purify HTML content in your preview for
HTML files. This must be loaded before fileinput.min.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.1/js/plugins/purify.min.js" type="text/javascript"></script>
<!-- popper.min.js below is needed if you use bootstrap 4.x (for popover and tooltips). You can also use the bootstrap js
3.3.x versions without popper.min.js. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- bootstrap.min.js below is needed if you wish to zoom and preview file content in a detail modal
dialog. bootstrap 4.x is supported. You can also use the bootstrap js 3.3.x versions. -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<!-- the main fileinput plugin file -->
<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>
<div class="file-loading">
<input id="input-b6" name="input-b6[]" type="file" multiple="multiple"/>
</div>
步骤 1) 附加文件
步骤 2) 三个按钮显示在底部。
问题:如何分离这些按钮以填充整个页面并使其响应屏幕分辨率。
我在这里使用Krajee 文件输入来自定义按钮,但它不考虑按钮之间的间距,因此我认为可以在这里应用自定义 css。
解决方案
用于课堂display: flex; justify-content: space-between;
,.input-group-btn
它将是工作的,或者如果你想全宽按钮使用.buttonCss{width:32%}
.input-group-btn{
display: flex;
justify-content: space-between;
}
$(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>',
actionZoom: '<button type="button" class="{zoomClass}" title="{zoomTitle}" onclick="openNewWindow(event)">{zoomIcon}</button>',
},
});
})
.input-group-btn{
display: flex;
justify-content: space-between;
}
/*.buttonCss{width:32%}*/
<!-- bootstrap 4.x is supported. You can also use the bootstrap css 3.3.x versions -->
<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" />
<!-- if using RTL (Right-To-Left) orientation, load the RTL CSS file after fileinput.css by uncommenting below -->
<!-- link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.1/css/fileinput-rtl.min.css" media="all" rel="stylesheet" type="text/css" /-->
<!-- the font awesome icon library if using with `fas` theme (or Bootstrap 4.x). Note that default icons used in the plugin are glyphicons that are bundled only with Bootstrap 3.x. -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<!-- piexif.min.js is needed for auto orienting image files OR when restoring exif data in resized images and when you
wish to resize images before upload. This must be loaded before fileinput.min.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.1/js/plugins/piexif.min.js" type="text/javascript"></script>
<!-- sortable.min.js is only needed if you wish to sort / rearrange files in initial preview.
This must be loaded before fileinput.min.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.1/js/plugins/sortable.min.js" type="text/javascript"></script>
<!-- purify.min.js is only needed if you wish to purify HTML content in your preview for
HTML files. This must be loaded before fileinput.min.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.1/js/plugins/purify.min.js" type="text/javascript"></script>
<!-- popper.min.js below is needed if you use bootstrap 4.x (for popover and tooltips). You can also use the bootstrap js
3.3.x versions without popper.min.js. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- bootstrap.min.js below is needed if you wish to zoom and preview file content in a detail modal
dialog. bootstrap 4.x is supported. You can also use the bootstrap js 3.3.x versions. -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<!-- the main fileinput plugin file -->
<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>
<div class="file-loading">
<input id="input-b6" name="input-b6[]" type="file" multiple="multiple"/>
</div>
推荐阅读
- c# - 如何从 C# 中的 plpgsql 函数返回 refcursor?
- .net - 多个文件上传挂起
- join - 提取两个字符串之间的差异
- rxjs - 如何在 RxJS 中测试错误操作?
- c# - 创建一个匿名对象,该对象必须在键名中包含点并将其放在另一个匿名对象中
- python - re.sub 不会将值更改为文档单词
- facebook - 调用 Facebook API 时出现“(#100)页面公共内容访问需要应用程序秘密证明或应用程序令牌”问题?
- spring - 春天注入模板化的类对象
- css - 根据某些值生成 SCSS mixins?
- typescript - Laravel-mix 编译错误:将 javascript 与 typescript 组件库捆绑:您可能需要适当的加载器来处理此文件类型