将单选按钮与标签对齐，其中标签具有Vue和Bootstrap的内联输入

Question

我有一个带有单选按钮组的表单，其中一个单选按钮的标签包含另一个(数字)输入。

现在看起来如下，即单选按钮没有与标签的其余部分对齐。我还不能得到我的头围绕css-spacing, padding, margin等，我被困在弄清楚哪个元素应该得到什么样的类居中。我将非常感谢您的帮助。

沙箱:https://codesandbox.io/s/keen-christian-s7u3c?file=/src/components/HelloWorld.vue

代码:

<b-form-group label="Radio Buttons with Inline Input">
<b-form-radio-group stacked v-model="radioValue">
<div>
<b-form-radio name="radio1" value="ONE"
>this is
<b-form-spinbutton
:disabled="radioValue === 'TWO'"
v-model="numberValue"
size="sm"
inline
></b-form-spinbutton>
not aligned
</b-form-radio>
</div>
<b-form-radio name="radio2" value="TWO"
>this is aligned</b-form-radio
>
</b-form-radio-group>
</b-form-group>

Answer 1

b-form-spinbutton的高度正在扩展其父b-form-radio的高度，这导致文本与单选图标不对齐。

一个快速的解决方法是缩小自旋按钮的高度:

<b-form-spinbutton style="height:1.5em">