diff --git a/components/ns-form/ns-form.vue b/components/ns-form/ns-form.vue index 4aec349..206c856 100644 --- a/components/ns-form/ns-form.vue +++ b/components/ns-form/ns-form.vue @@ -1171,23 +1171,11 @@ } } - checkbox-group { - display: flex; - flex-wrap: wrap; - } - + checkbox-group, radio-group { display: flex; flex-wrap: wrap; - } - - // 选项排列样式:vertical = 每个选项独立一行;wrap(默认)= 横向自动换行 - .option-layout-vertical { - checkbox-group, - radio-group { - flex-direction: column; - align-items: flex-start; - } + width: 100%; } label { @@ -1197,6 +1185,39 @@ margin-right: 30rpx; } + // 选项排列样式:vertical = 每个选项独立一行;wrap(默认)= 横向自动换行 + // 注意:option-layout-* 是 .box 自身的类,必须用 & 嵌套,否则编译成 .box .option-layout-* 会选不中 + &.option-layout-vertical { + checkbox-group, + radio-group { + flex-direction: column; + align-items: flex-start; + } + + label { + width: 100%; + margin-right: 0; + margin-bottom: 16rpx; + + &:last-child { + margin-bottom: 0; + } + } + } + + &.option-layout-wrap { + checkbox-group, + radio-group { + flex-direction: row; + align-items: center; + } + + label { + margin-right: 30rpx; + margin-bottom: 0; + } + } + &.img-boxs { display: flex; align-items: center; diff --git a/components/ns-newform/ns-newform.vue b/components/ns-newform/ns-newform.vue index 1464588..b3a5221 100644 --- a/components/ns-newform/ns-newform.vue +++ b/components/ns-newform/ns-newform.vue @@ -1389,7 +1389,8 @@ export default { } // 选项排列样式:vertical = 每个选项独立一行;wrap = 横向自动换行 - .option-layout-vertical { + // option-layout-* 是 .box 自身的类,必须用 & 嵌套,否则编译成 .box .option-layout-* 选不中实际 DOM + &.option-layout-vertical { checkbox-group, radio-group { flex-direction: column;