Я пытаюсь скопировать этот макет страницы с помощью 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 к столбцу, он становится слишком узким.
Что мне нужно изменить, чтобы столбцы в нижней части совпали со столбцами в верхней части?