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>
ピクセル精度のソリューションの場合、追加のCSSが必要になります(2019年)。 Bootstrapのみのソリューションが必要な場合は、.col-form-label
クラスを<label>
タグに追加し、Bootstrapバージョン4.3を使用します。高さには0.25remが追加されています。ただし、これは他の.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>
解決策:さらに最適化できます...
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>
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>