(Bootstrap 5) Col 元素不是内联的答案

【问题标题】：(Bootstrap 5) Col elements not inline(Bootstrap 5) Col 元素不是内联的
【发布时间】：2021-12-19 05:31:15
【问题描述】：

我正在尝试实现一个带有 3 个内联元素的 col：2 个按钮和一个选择

我设法让它与三个按钮一起工作，但如果我删除一个按钮并出于某种未知原因添加一个选择，它就不起作用。

3 个按钮正常工作并正确对齐：

如果我们点击 Tab2，所有三个项目都会出现混乱：

到目前为止我已经尝试过：

我以为是form-select 宽度问题，设置为100% 所以我做了：

.form-select {
    width: unset;
}

但是这三个元素仍然是未对齐的并且不是内联的。

如何将这三个元素内联？

【问题讨论】：

【解决方案1】：

你的选择一直跳到下一行的原因是.form-select类默认显示类型为block

要解决您的问题，您认为应该使用width: unset 是正确的，但是您还必须设置display: inline-block 以防止它进入下一行。

应添加以下 CSS：

.form-select {
  width: unset; /* note: width: auto; would also work here */
  display: inline-block;
}

注意，这只会让3个元素在空间足够的情况下并排，否则会自动换行。

【讨论】：