对于 Bootstrap 5，我想添加 close button至 form floating和 form control输入字段，以便用户可以轻松地清除移动设备上的文本，但它没有按预期工作。我在右端寻找一个简单的“x”，它将在文本输入后显示，as shown in the search field in this example .
对文档中的示例进行最小程度的复制，并插入我希望插入的关闭按钮:
<head>
<link href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2f4d40405b5c5b5d4e5f6f1a011e011f" rel="noreferrer noopener nofollow">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
</head>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d4bab5b9b194b1acb5b9a4b8b1fab7bbb9" rel="noreferrer noopener nofollow">[email protected]</a>">
<button type="button" class="btn-close" disabled aria-label="Close"></button>
<label for="floatingInput">Email address</label>
</div>
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">Email address</label>
<button type="button" class="btn-close" disabled aria-label="Close"></button>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7719161a1237120f161a071b125914181a" rel="noreferrer noopener nofollow">[email protected]</a>">
</div>
<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="177578786364636576675722392739273a7572637625" rel="noreferrer noopener nofollow">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
</html>
我做错了什么？
我可能做了一些愚蠢的事情，但我找不到 Bootstrap 5 的任何示例，所以请原谅这个愚蠢的问题。
最佳答案
"I'm after a simple 'x' on the right end that'll show after text input, as shown in the search field in this example."
该示例中的“X”只是一个搜索类型输入...
<div class="form-floating mb-3">
<input type="search" class="form-control" id="floatingInput" placeholder="<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1678777b7356736e777b667a733875797b" rel="noreferrer noopener nofollow">[email protected]</a>">
<label for="floatingInput">Email address</label>
</div>
或者，按照 similar question 中的说明使用输入组
<div>
<label for="exampleFormControlInput2" class="form-label">Email address</label>
<div class="input-group">
<input class="form-control border-end-0 border" type="email" placeholder="<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0668676b6346637e676b766a632865696b" rel="noreferrer noopener nofollow">[email protected]</a>" id="exampleFormControlInput2">
<span class="input-group-append">
<button class="btn btn-white border-start-0 border" type="button">
<i class="bi bi-search"></i>
</button>
</span>
</div>
</div>
关于html - 将关闭按钮/'x' 明文图标添加到 Bootstrap5 表单 float 和表单控制输入字段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68948559/