Vuetify中v-checkbox元素过大的问题
我正在Vue应用程序中使用Vuetify，并且我正在尝试创建一个复选框/文本字段组合(如here in the Vuetify docs所示)。然而，当我试图在我的应用程序中实现它时，checkbox元素的大小很大，因此它在复选框和文本字段之间创建了一个很大的空间：
这是我正在使用的标记：：
<v-container grid-list-lg>
<v-layout row>
<v-flex xs1>
<v-checkbox @change="disableText($event, 'alertBackgroundColor')"></v-checkbox>
</v-flex>
<v-flex xs4>
<v-text-field
v-bind="fields.alertBackgroundColor"
v-model="templateModel.alertBackgroundColor"
placeholder="#4A4A4A"
:disabled="true"
/>
</v-flex>
<v-flex xs1>
<ColorPickerButton
v-bind:field-name="'alertBackgroundColor'"
v-bind:init-color="templateModel.alertBackgroundColor"
v-on:update-color="getUpdatedColor">
</ColorPickerButton>
</v-flex>
<!-- Alert Text Color -->
<v-flex xs1>
<v-checkbox @change="disableText($event, 'alertBackgroundColor')"></v-checkbox>
</v-flex>
<v-flex xs4>
<v-text-field
v-bind="fields.alertTextColor"
v-model="templateModel.alertTextColor"
placeholder="#4A4A4A"
:disabled="true"
/>
</v-flex>
<v-flex xs1>
<ColorPickerButton
v-bind:field-name="'alertTextColor'"
v-bind:init-color="templateModel.alertTextColor"
v-on:update-color="getUpdatedColor"
></ColorPickerButton>
</v-flex>
</v-layout>
</v-container>如果我修改我的标记以模仿文档示例，如下所示：
<v-container grid-list-lg>
<v-layout row>
<v-flex xs5>
<v-checkbox @change="disableText($event, 'alertBackgroundColor')""></v-checkbox>
<v-text-field
v-bind="fields.alertBackgroundColor"
v-model="templateModel.alertBackgroundColor"
placeholder="#4A4A4A"
:disabled="true"
/>
</v-flex>
<v-flex xs1>
<ColorPickerButton
v-bind:field-name="'alertBackgroundColor'"
v-bind:init-color="templateModel.alertBackgroundColor"
v-on:update-color="getUpdatedColor">
</ColorPickerButton>
</v-flex>
</v-layout>
</v-container>它们甚至不能放在一行上：
如何让这两个元素像文档示例中那样并排安装在一起？问题在于计算出的元素本身的大小，而不是填充或边距，所以使用spacing helpers不会有什么不同。
回答 3
Stack Overflow用户
发布于 2019-05-10 09:33:40
您可以尝试在v-layout中包装v-checkbox和v-text-field
<v-layout>
<v-flex xs5>
<v-layout>
<v-checkbox v-model="includeFiles" hide-details class="shrink mr-2"></v-checkbox>
<v-text-field label="Include files"></v-text-field>
</v-layout>
</v-flex>
<v-flex xs1>Test</v-flex>
</v-layout>Stack Overflow用户
发布于 2020-06-03 16:54:16
<v-checkbox class="shrink mr-0 mt-0"></v-checkbox>Stack Overflow用户
发布于 2019-05-10 09:31:15
出现在那里的空格是由于xs1列造成的，所以它是正确的。
如果你把所有元素都放在一个v-flex中，那么元素将是display:block的，所以它将在另一行中；为了避免这种情况，请将其放入v-layout中，如下面的示例所示：
https://vuetifyjs.com/en/components/selection-controls -复选框-内联文本字段
并使用类shrink仅使用其内容所需的空间(https://vuetifyjs.com/en/framework/grid#grow-and-shrink)：
<v-layout row wrap>
<v-checkbox v-model="includeFiles" class="shrink mr-2"></v-checkbox>
<v-text-field label="Include files"></v-text-field>
</v-layout>JS
new Vue({
el: '#app',
data: () => ({
includeFiles: true,
enabled: false
})
})如果你想调整大小，让它出现在xs6列上，你可以这样做：
<v-layout row wrap>
<v-flex xs6>
<v-container fluid pa-0>
<v-layout row wrap>
<v-checkbox v-model="includeFiles" class="shrink mr-2"></v-checkbox>
<v-text-field label="Include files"></v-text-field>
</v-layout>
<v-container>
</v-flex>
</v-layout>Codepen在这里：https://codepen.io/pen/?&editable=true&editors=101
https://stackoverflow.com/questions/56066320
复制相似问题
腾讯云开发者
