Bootstrap 4 自定义文件上传和调整大小

Question

如何使用 input-group-sm、form-control-sm 等类将自定义文件输入大小添加到 Bootstrap 4？我想将此自定义文件输入字段设置为小。有人有解决办法吗？

使用类form-control-sm

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

    <div class="form-group">
      <input class="form-control form-control-sm" value="Small input field">
    </div>

使用类input-group-sm

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="input-group input-group-sm">
  <div class="input-group-prepend">
    <span class="input-group-text">Go</span>
  </div>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3" value="Small input group">
</div>

两者都不在这里工作。如何使输入字段变小？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="input-group input-group-sm">
  <div class="custom-file">
    <input type="file" class="custom-file-input form-control-sm">
    <label class="custom-file-label">Choose file</label>
  </div>
</div>

Answer 1

对于像素精确的解决方案，您仍然需要一些额外的 CSS（2019 年）。如果您想要仅 Bootstrap 的解决方案，请将 .col-form-label 类添加到 <label> 标记并使用 Bootstrap 版本 4.3。高度仍然有额外的 0.25 rem，但您可以像使用其他 .form-Control-sm 元素一样使用它。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>


<div class="form-group">
  <div class="custom-file">
    <input type="file" class="custom-file-input">
    <label class="custom-file-label">Choose file</label>
  </div>
</div>
<div class="form-group">
  <div class="custom-file">
    <input type="file" id="customFile" class="custom-file-input form-control-sm">
    <label class="custom-file-label col-form-label-sm" for="custmFile">Choose file</label>
  </div>
</div>

Answer 2

使用p-0将填充减少到0

同时添加如下样式

#abc.custom-file-label,
#abc.custom-file-label::after {
  height: auto;
  padding-top: 0;
  padding-bottom: 0;
}

#abc.custom-file-label,
#abc.custom-file-label::after {
  height: auto;
  padding-top: 0;
  padding-bottom: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="input-group input-group-sm  p-0">
  <div class="custom-file p-0">
    <input type="file" class="custom-file-input form-control-sm  p-0">
    <label id="abc" class="custom-file-label py-0">Choose file</label>
  </div>
</div>

Answer 3

解决方案：可以进一步优化...

function ftt(){
    $('#file').click(); // emulate click on input file
}
function on(){
    var ft = $('#file').val();
    $('#foto').val(ft);
}

function crearEmp(){
    var files = $('#file')[0].files;
    console.log('do something', files);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>


<form action="" method="POST">
    <div class="input-group input-group-sm mb-3">
        <div class="input-group-prepend">
            <span class="input-group-text font-italic" id="inputGroup-sizing-sm">Foto</span>
        </div>
        <input type="text" class="form-control" id="foto" name="foto" aria-label="Sizing example input" onClick="ftt()" value="No se ha seleccionado ningún archivo." aria-describedby="inputGroup-sizing-sm" />
    </div>
    <input type="file" onchange="on()" hidden="true" id="file" />
    <div class="col-md-6 offset-md-4">
        <button name="btn-" type="button" onClick="crearEmp()" class="btn btn-n btn-outline-success btn-sm">Guardar</button>
    </div>
</form>