Блог

Я использую bootstrap-vue и хотел бы добавить немного отступов на свою боковую панель, но я не могу заставить его работать. Если я добавлю заполнение в devtools браузера, это произойдет. Но мой код не будет отображаться в браузере, поэтому он там вообще не отображается.

Я попытался сам присвоить ему класс -> заканчивается в главном теге с классом: «b-sidebar-outer» -> Не помогает, потому что мне нужно, чтобы он перешел к тому, у которого есть «b-sidebar»

Но если я сделаю это (или как можно более конкретно с классами):

 .b-sidebar {
    padding: 10px;
}
  

-> не отображается

Я мог бы добавить дополнение к элементам внутри моей боковой панели, но это потребовало бы намного больше работы. : c

Кто-нибудь может помочь?

Vue.JS предоставляет каждому компоненту уникальный uid. В ваших DevTools вы увидите, что компоненты имеют атрибут data, когда ваш CSS будет проанализирован, он будет выглядеть примерно так div[data-v-f3f3eg9] .

Таким образом, несколько компонентов могут использовать одни и те же имена классов, не вмешиваясь друг в друга.

Чтобы задать стиль в другом компоненте, вы можете использовать глубокий селектор

Для SCSS:

 /deep/ .b-sidebar {
  padding: 10px;
}
  

Для CSS:

 .your-class >>> .b-sidebar {
  padding: 10px;
}