自己的填充不适用于 b-sidebar (vue)

Question

我正在使用 bootstrap-vue 并想在我的侧边栏中添加一些填充，但我无法让它工作。 如果我在浏览器 devtools 中添加填充，它会。 但是我的代码不会通过浏览器，所以它根本不会在那里显示。

我自己尝试给它一个 class -> 最终在主标签中带有 class: "b-sidebar-outer" ->没有帮助，因为我需要它才能转到带有“b-sidebar”的那个

但如果我这样做（或使用 classes 尽可能具体）：

.b-sidebar {
    padding: 10px;
}

-> 未显示

我 可以 为侧边栏中的元素提供填充，但这需要更多的工作。 :c

有人能帮忙吗？

Answer 1

Vue.JS 给出每个组件和唯一的 uid。在您的 DevTools 中，您会看到组件具有数据属性，当您的 CSS 被解析时，它将看起来像这样 div[data-v-f3f3eg9].

这样，多个组件可以使用相同的 class 名称，而不会相互干扰。

要在另一个组件中设置样式，您可以使用 deep selector

对于小号CSS:

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

对于CSS：

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