css - 将 Bootstrap 绑定到单个 div 容器

Question

一个用 php 编写的工具包含在商店系统中（氧化 eShop 作为包含）。该工具是在引导程序的帮助下编写的。我在 oxid.css（主店 css）之后包括 bootstrap.css 等。现在我遇到了盒子大小等问题。

如果我可以将整个 bootstrap.css 绑定到一个容器 div，那么该引导程序仅适用于该容器..它将解决我所有的问题..

#myBootstrapContainer { bootstrap only available here }

有谁知道这是怎么做到的吗？

Answer 1

氧化物.css

    * {
-webkit-box-sizing: inherit;
     -moz-box-sizing: inherit;
          box-sizing: inherit;
}

custom.css（覆盖/扩展 oxid.css）

  #myBootstrapContainer * {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
/* put every style which should be overwritten in here ...*/
}

Answer 2

您不能为网站的一部分设置不同的样式表。检查： 为同一网页的不同部分应用不同的 css 样式表

您可以修改引导 css 并在引导容器的每个选择器 id 之前添加，例如：

#myBootstrapContainer button {
  overflow: visible;
}

所以 boostrap 的规则应该只适用于你的容器内部