将 Bootstrap 绑定到单个 div 容器答案

【问题标题】：Binding Bootstrap to a single div-container将 Bootstrap 绑定到单个 div 容器
【发布时间】：2016-04-01 09:43:05
【问题描述】：

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

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

#myBootstrapContainer { bootstrap only available here }

有人知道怎么做吗？

【问题讨论】：

标签： css twitter-bootstrap oxid

【解决方案1】：

您不能为网站的一部分设置不同的样式表。查看： Apply different css stylesheet for different parts of the same web page

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

#myBootstrapContainer button {
  overflow: visible;
}

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

【讨论】：

【解决方案2】：

氧化.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 ...*/
}

【讨论】：