Question

我下载了一个模板，我根据自己的要求进行了自定义。每次我添加一个bootstrap元素时，它看起来都不像预期的结果。

我一直在寻找一些解决方案。我发现这个one是仅在我想要的div上应用bootstrap的最佳方式。我添加了bootstrap-iso.css file，并将我的引导代码放在<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更适合您要设置样式的元素来覆盖现有的Bootstrap CSS。

以下是一些关于特异性的好信息：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

如果您需要定位非常具体的内容，以下是CSS选择器的一个很好的资源：https://www.w3schools.com/cssref/css_selectors.asp

如果您使用的是模板和Bootstrap，那么最终会得到更多额外的CSS。

我希望这会有所帮助，但如果问题仍然存在，那么我不确定如果没有看到更多代码我们能做什么

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

1 个答案: