Bootstrap 4等价于form-control-feedback的内容

Question

Bootstrap 4等价于form-control-feedback的内容

3

form-control-feedback在Bootstrap 4中似乎不是一部分。如何使用Bootstrap 4实现以下结果（文本框内的图标）？

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <div class="container">
        <form class="form-horizontal">
            <div class="form-group has-warning has-feedback">
                <div class="col-sm-10">
                    <input type="text" class="form-control">
                    <span class="form-control-feedback"><i class="fa fa-rotate-right"></i></span>
                </div>
            </div>
        </form>
    </div>
</body>

- Hooman Bahreini

这不是“Bootstrap 4带有验证图标的表单输入”的重复。这个问题询问的是关于帮助文本，而不是在有效或无效消息中使用图标。正确的答案是使用Bootstrap 4.3中的两个类：form-text text-muted。这在4.3文档的“帮助文本”部分中有记录：https://getbootstrap.com/docs/4.3/components/forms/#help-text - Kevinleary.net

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Chris W. · Accepted Answer

你可以直接使用CSS类并应用它（注意v4 CDN），但要去掉固定大小的约定。

.form-control-feedback {
    position: absolute;
    top: .5rem;
    right: 1.5rem;
    z-index: 2;
    display: block;   
    text-align: center;
    pointer-events: none;
}

<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <div class="container">
        <form class="form-horizontal">
            <div class="form-group has-warning has-feedback">
                <div class="col-sm-10">
                    <input type="text" class="form-control">
                    <span class="form-control-feedback"><i class="fa fa-rotate-right"></i></span>
                </div>
            </div>
        </form>
    </div>
</body>

然而，请注意，如果您调整输入大小等Sass设置，则需要相应地调整top和right值，可能还需要添加字体大小。