Question

我在PHP文件中包含了一个bootstrap样式表，我只需要一个div。问题：它应该只影响这一个div。为实现这一点，我在bootstrap-stylesheet之前和之后放置了一个指向另一个CSS的链接，如下所示。但似乎bootstrap.css仍会影响div之外的一些元素。我怎么能阻止它呢？

<link rel="stylesheet" href="style/style-1.css" type="text/css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css">
<div class="container">
...
</div>
<link rel="stylesheet" href="style-1.css" type="text/css">

Answer 1

CSS中有一个名为＆＃34; 作用域css ＆＃34; ...它没有得到很好的支持（我只相信Fireofx ......我认为这样做更好）......它可以说样式表只适用于单个元素。

在您的情况下，但我绝对不推荐，您可以执行以下操作：

<div class="container">
    <style scoped>
    //... copy content from bootstrap stylesheet
    </style>
</div>

请点击此处查看示例：http://css-tricks.com/saving-the-day-with-scoped-css/

或此处：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style#A_scoped_stylesheet

点击此处了解哪些浏览器支持它：http://caniuse.com/#feat=style-scoped

Answer 2

在引导CSS文件之后加载辅助CSS文件的概念是覆盖某些元素并创建自己的样式。但是，由于您只想从引导程序CSS文件中获取一个元素，因此如果您不想在其他元素上看到引导程序样式，则必须覆盖所有其他元素。我 DON＆＃39; T 推荐。

我的建议是检查你想要在bootstrap中使用的某个元素的样式，然后在你自己的CSS文件中重新创建它。

Bootstrap样式表仅适用于一个div，但仍会影响其他div

2 个答案: