引导标签文本坚持输入字段的下线

时间:2018-09-18 12:59:26

标签: html css twitter-bootstrap

我正在尝试使用引导程序制作文件上传样式。遵循下面的代码效果很好,但是问题是标签Choose file粘贴了输入字段的下线。如何在输入字段的中间输入Choose file?为了获得更好的主意,请在下面查看图片-

pic

<div class="input-group mb-3">
    <div class="input-group-prepend">
        <span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
    </div>
    <div class="custom-file">
        <input type="file" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
        <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
    </div>
</div>

1 个答案:

答案 0 :(得分:1)

如果您使用的是Bootstrap 3,请尝试切换到Bootstrap 4。

您可以包含的CDN链接

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

或者您可能已经在输入字段的父类中使用了任何CSS,请尝试检查
Same code you provided gives correct output (i have included above link)