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

您尚未将显示样式属性添加到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>

Answer 2

您可以将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>

bootstrap 4文件输入按钮显示内联块

2 个答案: