Bootstrap 5 airbnb克隆：搜索栏作为按钮[关闭]

【问题标题】：Bootstrap 5 airbnb clone : Search bar as button [closed]Bootstrap 5 airbnb克隆：搜索栏作为按钮[关闭]
【发布时间】：2021-05-04 20:42:50
【问题描述】：

我想使用 bootstrap 5 像这样创建一个 搜索栏按钮，例如 airbnb：

HTML 代码：

<button type="button" class="btn btn-light">
        <span class="search-label">start your search</span>
        <span class="search-icon"><i class="fas fa-search"></i></span>
</button>

【问题讨论】：

您应该添加一些您编写的代码示例以尝试实现此目的。在 StackOverflow 上，您不会在没有自己先付出一些努力的情况下获得用于解决问题的代码。

标签： html css twitter-bootstrap bootstrap-5

【解决方案1】：

您可以使用输入组和边框实用程序。这也是available in Bootstrap 4，但现在left 和right 已更改为start 和end...

           <div class="input-group">
                <input class="form-control form-control-lg border-end-0 border border-dark rounded-pill rounded-end" type="text" value="Start your search" id="example-search-input" />
                <span class="input-group-append">
                    <button class="btn btn-outline-dark btn-lg border-start-0 rounded-pill rounded-start" type="button">
                        <i class="fa fa-search"></i>
                    </button>
                </span>
           </div>

https://codeply.com/p/Dv7ynKFM6J

另见：Search input with an icon Bootstrap 4

【讨论】：

谢谢你这么多兄弟