Загрузка и изменение размера файла в Bootstrap 4

Как я могу добавить настраиваемый размер входного файла в Bootstrap 4 с помощью таких классов, как input-group-sm, form-control-sm и т. д.? Я хочу сделать это настраиваемое поле ввода файла как можно меньшим. у кого-нибудь есть решение?

Использование класса `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>

twitter-bootstrap forms file input bootstrap-4

29.07.2018 10:11

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

12 351

Ответы 3

Уменьшите заполнение до 0 с помощью p-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>

29.07.2018 13:00

Для решения с точностью до пикселя вам все равно понадобится дополнительный CSS (в 2019 году). Если вам нужно решение только для Bootstrap, добавьте класс .col-form-label в тег <label> и используйте Bootstrap версии 4.3. Для высоты по-прежнему есть дополнительные 0,25 бэр, но вы можете использовать его так же, как и другие элементы .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>

22.10.2019 12:08

Решение: можно оптимизировать еще ...

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.info('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>

10.11.2019 23:04