- 日期: 2026-11-21 17:52:59
- 标签: 常规
"<div class="row">\n <form class="d-flex justify-content-between">\n <div class="col-auto">\n <input type="text" name="search" class="form-control" placeholder="搜索">\n
\n <div class="col-auto">\n <select name="order" class="form-select">\n <option value="">排序方式\n <option value="price_asc">价格从低到高\n <option value="price_desc">价格从高到低\n <option value="sold_count_desc">销量从高到低\n <option value="sold_count_asc">销量从低到高\n <option value="rating_desc">评价从高到低\n <option value="rating_asc">评价从低到高\n \n
\n \n
"\n\n使用 Bootstrap 5 的栅格系统和表单布局，你可以轻松地将 input 和 button 元素放置在表单的左边，select 元素放置在右边，并留出空白距离。\n\n-
row 类创建一个行容器，用于包含表单元素。\n-
d-flex 和
justify-content-between 类应用于
form 元素，将表单内容设置为 flex 布局并实现两端对齐。\n-
col-auto 类应用于
input、
button 和
select 元素的容器，使其自动占据所需的宽度。\n-
form-control 类应用于
input 元素，
form-select 类应用于
select 元素，以提供 Bootstrap 默认的表单样式。\n\n通过以上代码，你可以创建一个美观、整洁的表单布局，并在 input 和 select 元素之间留出一些空白距离，从而提升用户体验。
