为什么文本会脱离网格？元素用户界面

Question

我正在使用这个 Element UI 组件 https://element.eleme.io/#/en-US/component/checkbox#checkbox-group

基本上是对复选框进行分组，但我的细节是在网格中使用它时，它会离开 div

 <el-row>
          <el-form-item>
            <el-checkbox-group v-model="packageForm.premises.secundaryClassDefinitions" :disabled="isDisabled">
              <el-row>
                <el-col 
                   class="check-element" 
                   :span="12"
                   v-for="(item, index) in primaryClassCode" :key="index">
                    <el-checkbox 
                      :label="item.value"
                      :value="item.code">
                    </el-checkbox>>                
                </el-col>
              </el-row>
            </el-checkbox-group>
          </el-form-item>  
        </el-row>

在视觉上看起来像这样：

左边是一个复选框，右边是另一个复选框，所以你会看到左边的文本离开了行并转到另一边。

红色是整个div，黄色是包含文本的，你可以看到它是开箱即用的。 我能做些什么呢？ 我已将不同的属性应用于el-checkbox__label 类的css

width: 50%;
display:inline-block;
float:left
word-break: break-word

但它们不起作用。

Answer 1

您可以对父级使用“display: flex”，对子级使用“flex: 1”。喜欢：

.parent {
  display: flex;
}

.child {
  flex: 1;
}