кнопка загрузки файла начальной загрузки 4 встроенный блок

Question

Я создал кнопку входного файла и хочу установить ее на полную ширину (display: block).Я скрыл поле ввода, но все еще не вижу разницы.Вот мой код:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<form method='POST' action='' enctype='mutlipart/form-data'>
  <label for="uploadAvatar">
                    <p style="display:block" class="btn btn-secondary btn-sm mt-3">Upload new avatar</p>
                    <input type="file" id="uploadAvatar" name="uploadAvatar" style="display:none">
                </label>
</form>

Answer 1

Вы можете установить col-12 на этикетку.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<form method='POST' action='' enctype='mutlipart/form-data'>
  <label for="uploadAvatar" class="col-12">
                    <p style="display:block" class="btn btn-secondary btn-sm mt-3">Upload new avatar</p>
                    <input type="file" id="uploadAvatar" name="uploadAvatar" style="display:none">
                </label>
</form>

Answer 2

Вы не добавили свойства стиля отображения в HTML, потому что по умолчанию все элементы формы в Bootstrap: display: block и width: 100%.

Кроме того, вы можете использовать собственные утилиты класса Bootstrap 4, например::

d-block: для отображения блока любого элемента btn-block: для отображения блока элемента btn или элемента с классом btn.

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


<form>
  <div class="form-group">
    <label for="exampleFormControlFile1">Example file input</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile1" style="border: 1px solid #000;">
  </div>
</form>


<form method='POST' action='' enctype='mutlipart/form-data'>
  <label for="uploadAvatar" class="d-block">
    <p class="btn btn-secondary btn-block btn-sm mt-3">Upload new avatar</p>
    <input type="file" id="uploadAvatar" name="uploadAvatar" style="display:none">
  </label>
</form>