无法在 Vuetify 中设置正确的列宽

Question

我正在尝试使用 Vuetify 复制此页面布局

但我得到的是这个

这里是代码

    <Section>
      <div slot="contents">
        <v-form ref="form">
          <v-container>
            <v-layout row>
              <v-layout column class="mr-4">
                <v-flex xs6>
                  <v-text-field v-bind="fields.app" v-model="selectedTemplateApp" disabled />
                </v-flex>
                <v-flex xs6>
                  <v-text-field v-bind="fields.name" v-model="templateModel.name" />
                </v-flex>
                <v-flex xs6>
                  <v-text-field v-bind="fields.included" v-model="templateModel.included" />
                </v-flex>
              </v-layout>

              <v-layout column class="mr-2 ml-2">
                <v-flex xs6>
                  <v-select
                    :items="typeSelect"
                    v-bind="fields.type"
                    item-value="value"
                    item-text="text"
                    v-model="templateModel.type"
                    @input="toggleDynamic"
                  />
                  <v-text-field v-bind="fields.body" v-model="templateModel.body" />
                </v-flex>
                <v-flex xs6>
                  <v-select
                    :items="operationSelect"
                    v-bind="fields.algorithmOperation"
                    item-value="value"
                    item-text="text"
                    v-model="templateModel.algorithmOperation"
                  />
                </v-flex>
              </v-layout>
            </v-layout>

           <div v-if="showCustom">
            <v-divider></v-divider>
            <p>Customized appearance and message can be over-written via Send Alert</p>
            <v-layout row>
              <v-layout column class="pr-4">
                <v-flex xs6>
                  <v-layout row>
                    <v-checkbox class="shrink"></v-checkbox>
                    <v-text-field
                      v-bind="fields.alertTextColor"
                      v-model="templateModel.alertTextColor"
                      placeholder="#4A4A4A"
                    />
                    <ColorPickerButton
                      v-bind:field-name="'alertTextColor'"
                      v-bind:init-color="templateModel.alertTextColor"
                      v-on:update-color="getUpdatedColor"
                    ></ColorPickerButton>
                  </v-layout>
                </v-flex>

                <v-flex xs6>
                  <v-layout row>
                    <v-checkbox class="shrink"></v-checkbox>
                    <v-text-field
                      v-bind="fields.alertBackgroundColor"
                      v-model="templateModel.alertBackgroundColor"
                      placeholder="#4A4A4A"
                    />
                    <ColorPickerButton
                      v-bind:field-name="'alertBackgroundColor'"
                      v-bind:init-color="templateModel.alertBackgroundColor"
                      v-on:update-color="getUpdatedColor">
                    </ColorPickerButton>
                  </v-layout>
                </v-flex>
                <v-flex xs6>
                  <v-layout row>
                    <v-checkbox class="shrink"></v-checkbox>
                    <v-text-field
                      v-bind="fields.alertTextboxColor"
                      v-model="templateModel.alertTextboxColor"
                      placeholder="#FFFFFF"
                    />
                    <ColorPickerButton
                      v-bind:field-name="'alertTextboxColor'"
                      v-bind:init-color="templateModel.alertTextboxColor"
                      v-on:update-color="getUpdatedColor"
                    ></ColorPickerButton>
                  </v-layout>
                </v-flex>
                <v-flex xs6>
                  <v-layout row wrap>
                    <v-flex xs1>
                      <v-checkbox class="shrink"></v-checkbox>
                    </v-flex>
                    <v-text-field
                      v-bind="fields.backgroundImageUrl"
                      v-model="templateModel.backgroundImageUrl"
                      placeholder="Background Image URL - leave blank to use background color"
                      persistent-hint/>
                  </v-layout>
                </v-flex>
              </v-layout>

              <v-layout column>
                <v-flex xs6>
                  <v-text-field
                    v-bind="fields.headerText"
                    v-model="templateModel.headerText"
                    placeholder="An Alert has been issued"
                  />
                </v-flex>
                <v-flex xs6>
                  <v-textarea
                    v-bind="fields.bodyText"
                    v-model="templateModel.bodyText"
                    placeholder="Please verify your identity."
                    hint="HTML allowed"
                    persistent-hint
                    rows=3
                  />
                </v-flex>
                <v-flex xs6>
                  <v-layout row wrap>
                  <v-checkbox class="shrink"></v-checkbox>
                  <v-text-field
                    v-bind="fields.logoUrl"
                    v-model="templateModel.logoUrl"
                    placeholder="Custom Logo URL"
                    persistent-hint
                  />
                  </v-layout>
                </v-flex>
              </v-layout>
            </v-layout>
           </div>
          </v-container>
        </v-form>
      </div>
    </Section>

问题是底行的左列比顶行的左列宽，它们应该都对齐，但由于某种原因它没有。如果我将shrink 类应用于行中的各个项目，它们会缩小，但整体行宽保持不变，如果我将shrink 应用于列，那么它就太窄了。

我需要进行哪些更改才能使底部的列与顶部的列对齐？

Answer 1

您将底部支票放在一个额外的 flex 容器中，这会创建额外的填充/边距，删除它并且它应该对齐。或者，您可以使用mx-0 px-0 删除flex 边距/填充