bootstrap 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

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