如何在没有 CSS 重置的情况下添加 Bootstrap？答案

【问题标题】：How to add Bootstrap without CSS reset?如何在没有 CSS 重置的情况下添加 Bootstrap？
【发布时间】：2019-08-27 12:20:27
【问题描述】：

我有一个非常旧的工作页面，我根本不想更改/升级。我需要添加 Bootstrap 3，因为我添加了一个弹出模式，但 Bootstrap 默认 CSS 重置/重新样式正在更改旧页面，所以它看起来很糟糕。

有什么简单的方法可以防止 Bootstrap CSS 默认更改我的页面吗？

我知道我可以在不使用引导程序的情况下添加模态，但我已经编写了引导模态并且在同一网站的另一个页面上工作，所以我想使用相同的代码。

【问题讨论】：

标签： css twitter-bootstrap reset

【解决方案1】：

防止覆盖的一个很好的解决方案是转到此page 并选择您只想使用的组件。这将防止你带来你不需要的不必要的代码，并希望它会防止它覆盖你的 css。确保在调用 bootstrap 后添加所有 css 文件。此外，您可以在 css 文件的开头添加 css 重置。然后相应地设置样式并添加重要的标签。

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

【讨论】：

我已经尝试过只选择“modals”，当我添加 bootstrap.css 时仍然在改变我的页面行为
您是在传输整个 css 文件吗？如果不是，您可能在同一类下还有其他元素？ @user3781074
“转让”对您来说是什么意思？在添加引导 css 文件而没有任何其他代码（我的意思是，在添加模式代码之前）之后，这个问题就很明显了。
我的意思是你可能只是想抓住模态元素的样式而不带走其他所有东西。我猜这就是你的目标？这是有类似问题的人：stackoverflow.com/questions/17088160/using-just-bootstrap-modal 这将向您展示如何在没有任何其他组件的情况下获取模态。 @user3781074
这可能是一个不错的解决方案。我会试试看。