Vuetify.js:将两个 <v-flex> 元素放在 <v-layout> 的中央
Vuetify.js: Position two <v-flex> elements centrally inside <v-layout>
我有一个 <v-layout>
包含两个 <v-flex>
元素:
<v-layout row wrap align-center>
<v-flex>
<v-text-field
value="search"
style="float:left">
</v-text-field>
</v-flex>
<v-flex>
<v-btn><v-icon>search</v-icon></v-btn>
</v-flex>
</v-layout>
现在元素左对齐like this。我希望它们居中对齐(如上面链接图片中的主图像和两个灰色按钮)。
如何做到这一点?
当您使用 2 个 <v-flex>
组件时,它们都获得 50% width
,虽然看起来它们是左对齐的,但输入具有 block
显示和该按钮有一个 inline
显示,其结果类似于您的屏幕截图。
另一种方法是添加响应式 类,例如:
<v-layout>
<v-flex xs11>
<v-text-field
value="search"
style="float:left">
</v-text-field>
</v-flex>
<v-flex xs1>
<v-btn><v-icon>search</v-icon></v-btn>
</v-flex>
</v-layout>
您可以将两个元素包装在另一个 v-layout > v-flex
中并使用 offset-
指令添加左右填充(在 @kiarashws 示例之上构建):
<v-layout>
<v-flex xs12 sm8 offset-sm2>
<v-layout>
<v-flex xs11>
<v-text-field
value="search"
style="float:left">
</v-text-field>
</v-flex>
<v-flex xs1>
<v-btn color="primary"><v-icon>search</v-icon></v-btn>
</v-flex>
</v-layout>
</v-flex>
</v-layout>
我有一个 <v-layout>
包含两个 <v-flex>
元素:
<v-layout row wrap align-center>
<v-flex>
<v-text-field
value="search"
style="float:left">
</v-text-field>
</v-flex>
<v-flex>
<v-btn><v-icon>search</v-icon></v-btn>
</v-flex>
</v-layout>
现在元素左对齐like this。我希望它们居中对齐(如上面链接图片中的主图像和两个灰色按钮)。 如何做到这一点?
当您使用 2 个 <v-flex>
组件时,它们都获得 50% width
,虽然看起来它们是左对齐的,但输入具有 block
显示和该按钮有一个 inline
显示,其结果类似于您的屏幕截图。
另一种方法是添加响应式 类,例如:
<v-layout>
<v-flex xs11>
<v-text-field
value="search"
style="float:left">
</v-text-field>
</v-flex>
<v-flex xs1>
<v-btn><v-icon>search</v-icon></v-btn>
</v-flex>
</v-layout>
您可以将两个元素包装在另一个 v-layout > v-flex
中并使用 offset-
指令添加左右填充(在 @kiarashws 示例之上构建):
<v-layout>
<v-flex xs12 sm8 offset-sm2>
<v-layout>
<v-flex xs11>
<v-text-field
value="search"
style="float:left">
</v-text-field>
</v-flex>
<v-flex xs1>
<v-btn color="primary"><v-icon>search</v-icon></v-btn>
</v-flex>
</v-layout>
</v-flex>
</v-layout>