我如何使用 Vuetify CSS 间距助手？

Question

我正在使用 Vue 和 Vuetify 构建一个静态网站。根据文档，它支持 CSS 间距，如 py-5 和 mb-3。我试过添加它，但它不想接受。我真的不想手动添加每个元素的间距，但我现在不知所措。

这是 .Vue 文件之一，例如我正在做的事情。 None 的间距类无论如何都有效。有什么我没有正确实施的吗？我还添加了我的 main.js 文件以供参考。

Section_One.vue

<template>
  <v-main>
       <div id="social-section" class="py-5" >
           <div>
        <v-container fluid>
             <div class="text-center">
                <img src="../assets/images/allcologo.png" alt="" class="mx-auto mb-4" height="80">
                <h2>The first truly centerlized soical care plateform</h2>
                <p class="c2 mb-5">allco was created hand-in-hand with CBOs to streamline workflow and bridge communication gaps in community care.</p>
            </div>
            <v-row>
             <div class="col-md-6 mb-4">
                    <div class="social-card">
                        <div class="row">
                            <div class="col-2">
                                <img src="../assets/images/icon_3.png" alt="" class="d-inline-block" height="50px">
                            </div>
                            <div class="col">
                                <h4 class="d-inline-block">A single source of truth</h4>
                                <p class="c2">Finally, a shared digitol intake & referral system with a completely integrated resource directory. </p>
                            </div>
                        </div>  
                    </div>
                </div>
                <div class="col-md-6 mb-4">
                    <div class="social-card">
                        <div class="row">
                            <div class="col-2">
                                <img src="../assets/images/icon_2.png" alt="" class="d-inline-block" height="50px">
                            </div>
                            <div class="col">
                                <h4 class="d-inline-block">Lose the silos, collaborate more.</h4>
                                <p class="c2">Now CBOs county-wide can eliminate overlap in
                                    daily operations and better cross communicate. </p>
                            </div>
                        </div>  
                    </div>
                </div>
                                <div class="col-md-6 mb-4">
                    <div class="social-card">
                        <div class="row">
                            <div class="col-2">
                                <img src="../assets/images/icon_1.png" alt="" class="d-inline-block" height="50px">
                            </div>
                            <div class="col">
                                <h4 class="d-inline-block">Close the loops, bridge the gaps.</h4>
                                <p class="c2">Get real-time updates on community member status, eligibility, and even services received.  </p>
                            </div>
                        </div>  
                    </div>
                </div>
                <div class="col-md-6 mb-4">
                    <div class="social-card">
                        <div class="row">
                            <div class="col-2">
                                <img src="../assets/images/icon_0.png" alt="" class="d-inline-block" height="50px">
                            </div>
                            <div class="col">
                                <h4 class="d-inline-block">Better data, better insights.</h4>
                                <p class="c2">Deeper community health insights create awareness, grant opportunities, and fuels optimized care. </p>
                            </div>
                        </div>  
                    </div>
                </div>
            </v-row>      
      </v-container>
      </div>
    </div>
  </v-main>
</template>

main.js

import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
import router from './router'
import 'vuetify/dist/vuetify.min.css';

Vue.config.productionTip = false

new Vue({
  vuetify,
  router,
  render: h => h(App)
}).$mount('#app')

vuetify.js

import Vue from 'vue';
import Vuetify from 'vuetify/dist/vuetify';


Vue.use(Vuetify);

export default new Vuetify({
});

Answer 1

这个问题的原因是在组件中使用了 <v-main> 标签。根据 Vuetify documentation，它应该只在 Vue.app 文件中使用一次，就在 <v-app> 标签内。

我如何使用 Vuetify CSS 间距助手？

How can I use Vuetify CSS Spacing Helpers?

vue.js

vuetify.js