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

Question

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

目前看起来是这样的，i. e.单选按钮未与标签的其余部分对齐。我还不能理解 css-spacing、paddings、margins 等，并且一直在弄清楚哪个元素应该得到什么样的 class 来居中。如果有任何帮助，我将不胜感激。

沙盒：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">

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

Align radio button with label where label has inline input with Vue and Bootstrap

css

vue.js

bootstrap-4

bootstrap-vue