时间戳

首页 > 解决方案 > 引导标签文本粘贴到输入字段的下线

html - 引导标签文本粘贴到输入字段的下线

问题描述

我正在尝试使用引导程序制作文件上传样式。以下代码效果很好，但问题是标签Choose file与输入字段的下线粘在一起。如何Choose file在输入字段的中间制作？为了获得更好的想法，请查看下面的图片-

图片

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

标签： htmlcsstwitter-bootstrap

解决方案

如果您使用的是 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 尝试检查您提供的
相同代码是否提供正确的输出（我已包含上面的链接）

推荐阅读