Question

我正在尝试使用vuejs和vuetify创建一个简单的项目管理视图。 vuejs的网格样式具有我要使用的视图，但我无法像“需要执行”，“开始”，“完成”中那样使不同的对象在顶部彼此相邻。这是代码，它看起来像我想要的那样，只是顺序不正确。其他人也可以指出我如何使其成为唯一容器的方向，以便我可以向每个列中添加特定信息

    <template>

<div class="projects">

<!-- Need to do container -->
<v-container fluid grid-list-md text-xs-center>
  <v-layout column>
    <v-flex xs6 order-lg2>
      <v-card dark color="blue">
        <v-card-text class="px-0">Need to Do</v-card-text>
      </v-card>
    </v-flex>
  </v-layout>
</v-container>

  <!-- Started Container -->
    <v-container fluid grid-list-md text-xs-center>
      <v-layout column>
       <v-flex>
         <v-card dark color="green">
           <v-card-text class="px-0">Started</v-card-text>
         </v-card>
       </v-flex>
     </v-layout>
   </v-container>

  <!-- Done Container -->
   <v-container fluid grid-list-md text-xs-center>
     <v-layout column>
    <v-flex>
      <span>
      <v-card dark color="purple">
        <v-card-text class="px-0">Done</v-card-text>
      </v-card>
      </span>
    </v-flex>
        </v-layout>
      </v-container>
    </div>

    </template>


    <script>
    export default {

   }
< /script>

Answer 1

您可以用<v-container>包裹三个<v-layout row>，这将使列在水平方向上相邻。要将列的项目移到顶部，请用<v-container fluid>替换<v-container fill-height>。

new Vue({
  el: '#app',
})

<script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.7/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@1.5.7/dist/vuetify.min.css">

<div id="app">
  <v-app>
    <v-layout align-start row fill-height>
      <!-- Need to do container -->
      <v-container fill-height grid-list-md text-xs-center>
        <v-layout column>
          <v-flex xs6 order-lg2>
            <v-card dark color="blue">
              <v-card-text class="px-0">Need to Do</v-card-text>
            </v-card>

            <v-card>
              <v-card-text>Clean garage</v-card-text>
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>

      <!-- Started Container -->
      <v-container fill-height grid-list-md text-xs-center>
        <v-layout column>
          <v-flex>
            <v-card dark color="green">
              <v-card-text class="px-0">Started</v-card-text>
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>

      <!-- Done Container -->
      <v-container fill-height grid-list-md text-xs-center>
        <v-layout column>
          <v-flex>
            <span>
              <v-card dark color="purple">
                <v-card-text class="px-0">Done</v-card-text>
              </v-card>
            </span>
          </v-flex>
        </v-layout>
      </v-container>
    </v-layout>
  </v-app>
</div>

Answer 2

您可能想要，这是假设您只是想将必须连续放置的现有容器

<v-container>
  <v-layout row wrap>
    <!-- Need to do container -->
    <!-- Started Container -->
    <!-- Done Container -->
  </v-layout>
</v-container>

如何使网格项目彼此相邻？

2 个答案: