Bootstrap中如何实现无默认样式的<form>标签以达到<span>同等显示效果

不需要逐个置零所有CSS样式，有更简便的实现方案：

• 方案1：使用all: unset一键重置（兼容性覆盖Chrome 41+、Firefox 27+、Edge 79+、Safari 9.1+，覆盖绝大多数主流用户场景）
  给目标form标签添加自定义类，配套CSS如下：

  /* 自定义类名可自行修改 */
  .form-inline-like-span {
    all: unset;
    display: inline;
  }
  

  all: unset会自动清除所有浏览器默认、Bootstrap附加给form的样式，再单独指定display: inline即可实现和span完全一致的行内表现。
• 方案2：针对性重置核心属性（适配更老的浏览器版本）
  不需要修改全部样式，仅需重置Bootstrap给form附加的几个核心样式即可，代码如下：

  .form-inline-like-span {
    display: inline;
    margin: 0;
    padding: 0;
    border: none;
    width: auto;
    background: transparent;
    box-shadow: none;
  }
  

• 方案3：直接使用Bootstrap原生工具类（无需写自定义CSS，适合Bootstrap 5及以上版本）
  直接给form标签添加以下自带工具类即可：

  <form class="d-inline m-0 p-0 border-0 bg-transparent shadow-none w-auto">
    <!-- 表单内容 -->
  </form>
  

以上设置仅作用于form标签本身，不会影响form内部的表单元素样式，若内部元素也需要调整单独针对性设置即可。

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