Блог

Главная - Вопросы по программированию - Как я могу использовать помощники по разделению CSS Vuetify?

Как я могу использовать помощники по разделению CSS Vuetify?

#vue.js #vuetify.js

Вопрос:

Я создаю статический веб-сайт, используя Vue и Vuetify. Основываясь на документации, он поддерживает CSS-интервалы, такие как py-5 и mb-3 . Я пытался добавить его, но он не хочет принимать. Я действительно не хочу вручную добавлять интервал между каждым элементом, но сейчас я в растерянности.

Вот один из них .Файлы Vue для примера того, что я делаю. Ни один из классов интервалов вообще не работает. Есть ли что-то, что я не реализую должным образом? Я также добавил свой main.js файл также для справки.

раздел_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 amp; 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({
});

Комментарии:

1. Что-то мне подсказывает, что есть проблема с использованием <v-main> в компоненте. Я считаю, что он должен быть определен только один раз в файле App.vue внутри <v-app> . Попробуйте удалить его из компонента. Как бы то ни было, я просто попытался запустить ваш код в JSFiddle, и, похоже, он работает просто отлично, я вижу поля и отступы: jsfiddle.net/m9okfs4a

Ответ №1:

Причиной этой проблемы было использование <v-main> тега внутри компонента. Согласно документации Vuetify, его следует использовать только один раз внутри файла Vue.app, прямо внутри <v-app> тега.

Метки: