时间戳

首页 > 解决方案 > 引导导入影响所有其他 CSS 设计

html - 引导导入影响所有其他 CSS 设计

问题描述

所以我正在使用 vue js 做一个项目。我的项目有不同的组件，其中一个组件是 SignUp，它是一个注册页面。出于验证目的，我安装了引导程序以使用表单检查和表单组。但是在使用它之后，我意识到我的所有其他组件设计已经被破坏了......我遵循的教程在 main.js 中导入了引导程序，但即使我现在尝试将它导入到组件 SignUp 中，所有其他设计仍然不是应有的是。

import 'bootstrap/dist/css/bootstrap.min.css'

注册组件

<div class="form-group">
                <label for="text"> Full Name </label>
                <input type="text" class="form-control" v-model.trim="$v.name.$model" :class="{
                 'is-invalid' :$v.name.$error, 'is-valid':!$v.name.$invalid
                 }">
                <div class="valid-feedback"> Your name is valid! </div>
                <div class="invalid-feedback">
                    <span v-if="!$v.name.required"> Your name is required. </span>
                    <span v-if="!$v.name.minLength"> Name must have at least {{$v.name.$params.minLength.min}} letters. </span>
                    <span v-if="!$v.name.maxLength"> Name must have at most {{$v.name.$params.maxLength.max}} letters. </span>
                </div>
            </div>

在导入引导程序之前

在此处输入图像描述

导入引导程序后

在此处输入图像描述

css 设计中断

标签： htmlcssvue.jsbootstrap-4

解决方案

我认为有很多选择，最简单的一种是将 import bootstrap 语句转移到组件中

import  Vue from "Vue"
import 'bootstrap/dist/css/bootstrap.min.css'

但是当您将该组件与我侦察的其他组件一起使用时，这仍然会弄乱您的用户界面。但是，如果您单独使用组件，那么它很酷

考虑导入引导程序scoped styles以更好地封装 检查作用域 css 以限制组件内的 css

PS：好吧，如果您只想将引导程序用于表单组件，则应该考虑使用引导程序混合并仅导入与表单相关的 css

推荐阅读