Bootstrap Vue单选按钮样式调整：左对齐与垂直间距优化

针对你提到的两个需求，通过自定义CSS覆盖Bootstrap Vue默认样式即可实现：

1. 实现单选按钮左对齐 #

Bootstrap Vue的b-form-radio默认采用flex布局且水平居中，只需修改flex对齐方式就能让内容左对齐：

/* 用自定义类限定样式范围，避免全局污染 */
.custom-radio-group .b-form-radio {
  justify-content: flex-start;
  text-align: left;
}

2. 缩小垂直间距 #

分别调整单选按钮与文本的垂直对齐、选项间的间距，以及文本行高：

/* 缩小选项之间的垂直间距 */
.custom-radio-group .b-form-radio {
  margin-bottom: 0.25rem; /* 默认间距通常为1rem，可按需调整数值 */
  align-items: center; /* 让按钮与文本垂直居中，减少冗余空隙 */
}

/* 减小文本行高，进一步压缩垂直空间 */
.custom-radio-group .b-form-radio-label {
  line-height: 1.2; /* 默认行高约1.5，按需调整 */
  /* 可选：调整按钮与文本的水平间距，默认可能偏大 */
  padding-left: 0.5rem;
}

模板中应用自定义类 #

在你的单选按钮组上添加自定义类名：

<b-form-radio-group v-model="selectedValue" class="custom-radio-group">
  <b-form-radio value="opt1">示例文本1</b-form-radio>
  <b-form-radio value="opt2">示例文本2</b-form-radio>
  <b-form-radio value="opt3">示例文本3</b-form-radio>
</b-form-radio-group>

这些样式仅作用于目标单选组，既不会影响页面其他组件，又能完全满足你的对齐和间距需求。

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