bootstrap импорт, влияющий на все другие css дизайн - PullRequest
Новая
       32

bootstrap импорт, влияющий на все другие css дизайн

0 голосов
/ 17 марта 2020

Итак, я работаю над проектом, используя vue js. В моем проекте есть разные компоненты, одним из которых является SignUp, который является страницей регистрации. В целях проверки я установил bootstrap, чтобы использовать проверку формы и форму группы. Но после его использования я понимаю, что теперь все мои другие компоненты были разрушены ... Учебное пособие, которому я следовал, импортировало bootstrap в основном. 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>

до импорта bootstrap

enter image description here

после импорта bootstrap

enter image description here

css проектные разрывы

1 Ответ

0 голосов
/ 17 марта 2020

На мой взгляд, существует много опций, самым простым из которых будет смещение оператора import bootstrap в компонент 

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

, но это все равно испортит ваш пользовательский интерфейс, когда вы используете компонент с другими компоненты я восстанавливаю Но если вы используете компоненты по отдельности, то это круто

Подумайте об импорте bootstrap в scoped styles для лучшей инкапсуляции Извлеките область действия css, чтобы ограничить css внутри компонента

PS: Ну, если вы хотите использовать bootstrap только для компонента формы, вы должны изучить использование bootstrap mixins и импортировать только форму, связанную css

...