Question

我将Vuetify用于某些组件。我将其添加到我的App.vue中：

<template>
    <v-app style="background: transparent !important;">
        <nprogress-container></nprogress-container>
        <v-content>
            <v-container fluid>
                <v-flex shrink>
                    <router-view></router-view>
                </v-flex>
            </v-container>
        </v-content>
    </v-app>
</template>

我只需要一小部分组件。但这也打破了我的引导风格。它使用.d-flex用自己的.d-flex重写引导程序的flex-grow: 1。而且它破坏了我的应用风格。

具有引导程序类的一个组件：

<div v-if="lineType === 'main-line'"
             @click="toggleHiddenBlock"
             @mouseover="onMouseMove"
             @mouseout="onMouseMove"
             class="main-line m-0 d-flex flex-column flex-sm-row
                    justify-content-between justify-content-sm-start
                    align-items-center">
            <div class="main-line__img flex-grow-0">
                <img :src="imgSrc" alt="Fin Info" class="main-line__img-icon">
            </div>
            <div class="main-line__border-wrapper
                        d-flex flex-column flex-sm-row flex-grow-1
                        justify-content-between align-items-center">
                <p class="main-line__text text-center text-sm-left">{{text}}</p>
                <p class="main-line__money m-sm-0 ml-sm-auto flex-grow-0 text-center text-sm-right">
                    <span v-show="false" class="main-line__money-minus">–</span>
                    205 378<span class="main-line__money-cents">.00</span> $
                </p>
            </div>
        </div>

组件内的所有元素都开始弹性增长，这并不是我真正想要的。通过使用自己的.d-flex来通过自己的.d-flex来重写重写引导!important。

我该如何解决这个问题？

我尝试用自己的!important重写它，但没有帮助。
我尝试将收缩用于v-flex，但这也无济于事。

结果，我得到了： http://i.shotnes.com/u/2778/0415/screenshot_17777.png

Vuetify打破了引导D-flex

0 个答案: