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

【问题标题】：bootstrap 4 file input button display inline-blockbootstrap 4 文件输入按钮显示内联块
【发布时间】：2019-05-01 16:25:40
【问题描述】：

我创建了一个输入文件按钮，我想将其设置为全角（显示：块）。我已经隐藏了输入字段，但仍然看不出有什么不同。这是我的代码：

<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>

【问题讨论】：

标签： html css forms bootstrap-4

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：