html - 如何隔离Bootstrap CSS以避免与已下载模板的默认CSS样式发生冲突

Question

我下载了一个模板，我正在根据我的要求定制它。每次我添加bootstrap元素时，它看起来都不像预期的结果。
我一直在寻找一些解决办法。我发现这个one是只在我想要的div上应用bootstrap的最佳方法。我添加了bootstrap-iso.cssfile并将引导代码放入<div class="bootstrap-iso">...</div>
但仍然没有得到正确的结果。它仍然得到我模板的默认类，而不是引导样式
例如，如果我想将这个可搜索的多选下拉列表添加到我的模板中。如何插入？谢谢你的建议。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
     <select name="framework" id="framework" class="form-control selectpicker" data-live-search="true" multiple>
      <option value="Laravel">Laravel</option>
      <option value="Symfony">Symfony</option>
      <option value="Codeigniter">Codeigniter</option>
     </select>

Answer 1

防止Bootstrap CSS、模板CSS和您自己的CSS之间冲突的最好方法是不要隔离Bootstrap样式表。你只需要让你想应用的CSS更具体。
你所包含的代码片段对我来说很好，但它很可能不适合你，因为你有CSS与之交互。您可以通过使CSS更具体地为您想要的样式来覆盖现有的引导式CSS。
这里有一些关于特异性的好信息：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
这里是一个很好的CSS选择器资源，以防您需要针对非常特定的对象：https://www.w3schools.com/cssref/css_selectors.asp
在一天结束的时候，如果你使用一个模板和引导程序，你将会得到很多额外的CSS。
我希望这能有所帮助，但如果问题继续存在，我不确定在没有看到更多代码的情况下我们能做些什么