表单控制反馈的bootstrap 4等效项[重复]答案

【问题标题】：bootstrap 4 equivalent for form-control-feedback [duplicate]表单控制反馈的bootstrap 4等效项[重复]
【发布时间】：2019-04-16 20:26:06
【问题描述】：

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>

【问题讨论】：

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

标签： css twitter-bootstrap bootstrap-4

【解决方案1】：

您可以直接使用 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 值进行相应调整，并可能添加字体大小。

【讨论】：

谢谢@Chris，我想知道是否有内置的引导解决方案...如果找不到内置类，我会使用您的答案。
@Hooman 是 bootstrap 3 的原始类，在 bootstrap4 中没有等价物，因为现在大多数人现在选择通过 input {font-family: 'FontAwesome'} 然后 placeholder="\iconUnicode\" 将图标放在占位符中，我反正都知道。