时间戳

首页 > 解决方案 > 为什么我的引导自定义文件类没有像示例那样显示

twitter-bootstrap - 为什么我的引导自定义文件类没有像示例那样显示

问题描述

我试图显示引导视图，这是引导文档中的示例

在此处输入图像描述

但这就是我的看法

在此处输入图像描述

我用 safari 和 chrome 展示它，但它显示相同。有人知道为什么吗？？

标签： twitter-bootstrapbootstrap-4

解决方案

你可能会错过 css 链接

$(".custom-file-input").on("change", function() {
  var fileName = $(this).val().split("\\").pop();
  $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  
  
  <form action="">
    <div class="custom-file mb-3">
      <input type="file" class="custom-file-input" id="customFile" name="filename">
      <label class="custom-file-label" for="customFile">Choose file</label>
    </div>
  </form>

推荐阅读