Bootstrap Form-Control-File类在表单中不起作用

Question

我在botstrap 4.0中使用了标准格式，一切正常，但是我的输入按钮没有应用bootstrap的CSS。

<div class="form-group">                                
 <input type="file" class="form-control-file" id="exampleFormControlFile1">
</div>

Answer 1

Bootstrap不会为input的按钮设置样式，其类型为file。

如果要应用Bootstrap样式的文件格式，则需要使用.custom-file类。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div>Custom File</div>
<div class="custom-file">
  <input type="file" class="custom-file-input" id="validatedCustomFile" required>
  <label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
</div>