Bootstrap按钮与下拉选框同行显示及缩短选框宽度问题

未添加<select>元素时，三个按钮可通过Bootstrap的d-grid gap-2 d-md-block类正常同行显示，布局美观。但添加<select>元素后，该元素自动换行且宽度过长，希望实现四个元素（三个按钮+一个下拉选框）在同一行显示，并缩短select元素的宽度，达到类似[Search] [Reset] [Export] [Please select format ]的布局效果。

提供的代码：

<div class="d-grid gap-2 d-md-block mt-1">
    <button class="btn btn-secondary" id="btnSearch"><i class="fa fa-search fa-fw"></i>Search</button>
    <button class="btn btn-primary ml-1" id="btnReset"><i class="fa fa-retweet fa-fw"></i>Reset</button>
    <button class="btn btn-outline-success ml-1" id="btnExport"><i class="fas fa-file-export"></i>Export List</button>
    <select class="form-select" aria-label="Download Format">
        <option selected>Please select format</option>
        <option value="1">Excel</option>
        <option value="2">PDF</option>
    </select>
</div>

注：元素的父级无<form>标签。

Bootstrap的d-md-block类会让子元素在md及以上屏幕宽度下以块级元素显示，这是导致<select>换行的核心原因。可以通过以下调整实现需求：

1. 替换父容器布局类 #

将父容器的d-grid gap-2 d-md-block替换为d-flex flex-wrap gap-2 mt-1，利用Flexbox布局让所有子元素默认同行排列，同时flex-wrap保证小屏幕下自动换行：

<div class="d-flex flex-wrap gap-2 mt-1">
    <button class="btn btn-secondary" id="btnSearch"><i class="fa fa-search fa-fw"></i>Search</button>
    <button class="btn btn-primary" id="btnReset"><i class="fa fa-retweet fa-fw"></i>Reset</button>
    <button class="btn btn-outline-success" id="btnExport"><i class="fas fa-file-export"></i>Export List</button>
    <select class="form-select" aria-label="Download Format">
        <option selected>Please select format</option>
        <option value="1">Excel</option>
        <option value="2">PDF</option>
    </select>
</div>

注：原按钮上的ml-1可以去掉，用gap-2统一控制元素间距，布局更一致。

2. 缩短select元素宽度 #

可以通过两种方式调整select宽度：

• 方式一：使用Bootstrap的宽度工具类
  给<select>添加w-auto类，让它根据内容自适应宽度；或者用w-25等固定比例类：

<select class="form-select w-auto" aria-label="Download Format">...</select>

• 方式二：自定义内联样式
  如果需要更精确的宽度，直接添加style属性：

<select class="form-select" style="width: 200px;" aria-label="Download Format">...</select>

最终完整代码 #

结合以上调整，最终代码如下：

<div class="d-flex flex-wrap gap-2 mt-1">
    <button class="btn btn-secondary" id="btnSearch"><i class="fa fa-search fa-fw"></i>Search</button>
    <button class="btn btn-primary" id="btnReset"><i class="fa fa-retweet fa-fw"></i>Reset</button>
    <button class="btn btn-outline-success" id="btnExport"><i class="fas fa-file-export"></i>Export List</button>
    <select class="form-select w-auto" aria-label="Download Format">
        <option selected>Please select format</option>
        <option value="1">Excel</option>
        <option value="2">PDF</option>
    </select>
</div>

这样就能实现四个元素同行显示，且select宽度适配内容的效果，同时保留小屏幕下的自动换行兼容性。

内容的提问来源于stack exchange，提问作者Carrie Kaski