Bootstrap 5 airbnb 克隆：搜索栏作为按钮

Question

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

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>

Answer 1

您可以使用输入组和边框实用程序。这也是，但现在 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

另见：

Bootstrap 5 airbnb 克隆：搜索栏作为按钮

Bootstrap 5 airbnb clone : Search bar as button

html

css

twitter-bootstrap

bootstrap-5