Question

在我的vuejs应用程序中，我有一个名为 ProductDetails.vue的文件。。对于模板，我使用了Vuetify创建了一个网格系统，其中产品的图像位于左侧，产品的内容位于左侧在右边。但是，我遇到了两个问题。 首先，我如何将图像和内容彼此远离，以便有空间。 第二，如何将按钮移至产品最右边的内容。以下是我的代码，当前设计的屏幕截图和所需设计的屏幕截图。

https://codepen.io/Issaki/pen/qwRWgZ

更新＃1：我仍在尝试解决此问题，有没有人可以帮助我？

<template>
  <div>
    <v-container>
      <v-layout row wrap>
        <v-flex xs12 sm6 md5 lg5>
          <v-img
            class="white--text"
            height="350px"
            src="https://cdn.vuetifyjs.com/images/cards/docks.jpg"
          />
        </v-flex>
        <v-flex xs12 sm6 md7 lg7>
          <p class="subheading font-weight-light grey--text text--darken-1 mb-1">Samsung</p>
          <p class="display-1 font-weight-light">OnePlus 3</p>
          <p
            class="subheading"
          >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <p class="headline font-weight-medium">$329</p>
          <p class="muted">Inclusive of all taxes. Free home delivery.</p>
          <v-btn color="yellow">
            <v-icon left>shopping_cart</v-icon>Add to Cart
          </v-btn>
        </v-flex>
      </v-layout>
    </v-container>
  </div>
</template>

Answer 1

如果您只向其中一个添加填充，则可以在两个v-flex之间添加空格。因此，通过将class="pl-3"转换为padding-left-3到第二个v-flex，可以增加一些空间。您可以了解有关spacing helpers的更多信息。

对于按钮，只需将其包装在其中即可：

<v-layout align-end justify-end>
        <v-btn color="yellow" >
             <v-icon left>shopping_cart</v-icon>Add to Cart
         </v-btn>
</v-layout>

您可以详细了解here.

更新：一种增加间距的更好方法是将grild-list-*添加到您的容器中。在这种情况下，它将为容器中的所有元素增加一些间距，因此您不再需要添加的填充。您可以在下面查看更新的Codepen，并了解更多here.

我已经分叉并编辑了您的Codepen。

希望它会有所帮助：）

如何在Vuetify中将v-flex元素彼此远离？

1 个答案: