如何在段落中间插入Bootstrap(-Vue)行内输入框并避免换行？

嘿，我懂你遇到的这个小麻烦——明明加了inline参数，段落里的输入框还是硬生生跑到下一行去了对吧？其实问题出在<b-form inline>的定位逻辑上，它本质是个块级容器，哪怕加了inline属性，也还是会默认占据一整行空间，自然就把后面的文本挤到下一行了。

下面给你两个简单有效的解决办法：

方法一：直接给<b-input>加Bootstrap布局类 #

不用嵌套在<b-form inline>里，直接给输入框加上d-inline-block（行内块元素）类，这样它就能和段落文本保持在同一行，同时还能正常设置宽高：

<p>
  这里是段落文本，比如 anim <b-input id="inline-form-input-name" type="number" class="d-inline-block" style="width: auto;"></b-input> 后面接着的文本
</p>

• d-inline-block：让元素成为行内块，既不会强制换行，又支持自定义宽高
• width: auto：让输入框根据内容自动适配宽度，更贴合段落的排版节奏

如果需要让输入框和文本垂直居中对齐，再加个align-middle类就更完美了：

<p>
  anim <b-input id="inline-form-input-name" type="number" class="d-inline-block align-middle" style="width: auto;"></b-input> 后续文本
</p>

方法二：用原生<input>配合Bootstrap类（可选） #

如果你不需要Bootstrap-Vue输入框的额外交互功能，也可以直接用原生<input>加上Bootstrap的表单类，效果完全一致：

<p>
  anim <input type="number" class="form-control d-inline-block align-middle" style="width: auto;"> 后续文本
</p>

补充一句：为什么原来的<b-form inline>不行？因为它是专门用来创建整行的内联表单的（比如多个表单控件并排的场景），不是为插入段落文本设计的，所以嵌套在段落里就会触发默认的块级换行行为。

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