仅将 Bootstrap 样式应用于 div [重复]

Question

这个问题在这里已经有了答案：

如何命名空间 Twitter Bootstrap 所以 styles 不要冲突（13 个答案）

2 年前关闭。

我想应用这种<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">只给一个div而不影响整个网站的风格，可能吗？ 这是股利：

<div class="nav-scroller py-1 mb-2">

    <nav class="nav d-flex justify-content-between">

        <a class="p-2 text-muted" href="#">Menu 1</a>
        <a class="p-2 text-muted" href="#">Menu 2</a>
        <a class="p-2 text-muted" href="#">Menu 3</a>

    </nav>
</div>

Answer 1

这就是您要查找的内容：

 .a { padding-bottom: .25rem; padding-top: .25rem; margin-bottom: .5rem; }.b { display: flex; justify-content: space-between; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none; }.c { color: #6c757d; padding: .5rem; text-decoration: none; background-color: transparent; }

 <div class="a"> <nav class="b"> <a class="c" href="#">Menu 1</a> <a class="c" href="#">Menu 2</a> <a class="c" href="#">Menu 3</a> </nav> </div>

显然， .a 、 .b和.c是通用的。 将它们更改为您想要的任何内容。

请注意，上面的代码片段仅应用了那些引导类指定的实际属性，仅此而已。 我也没有使用!important ，因为在您的情况下似乎没有必要。 如果您需要将任何 Bootstrap 的reboot.css规则应用到您的元素，您应该将整个元素包装到具有特定 class（例如.bs ）的包装器中，并从此文件中手动选择重置规则。

要应用所有这些，请将您的元素包装到<div class="bs"></div>包装器中并使用此 CSS：

 .bs *, .bs *::before, .bs *::after { box-sizing: border-box }.bs html { font-family: sans-serif; line-height: 1.15; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0) }.bs article, .bs aside, .bs figcaption, .bs figure, .bs footer, .bs header, .bs hgroup, .bs main, .bs nav, .bs section { display: block }.bs body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; text-align: left; background-color: #fff }.bs [tabindex="-1"]:focus:not(:focus-visible) { outline: 0.important }:bs hr { box-sizing; content-box: height; 0: overflow. visible },bs h1. ,bs h2. ,bs h3. ,bs h4. ,bs h5. :bs h6 { margin-top; 0: margin-bottom. 0.5rem }:bs p { margin-top; 0: margin-bottom. 1rem },bs abbr[title]. :bs abbr[data-original-title] { text-decoration; underline: -webkit-text-decoration; underline dotted: text-decoration; underline dotted: cursor; help: border-bottom; 0: -webkit-text-decoration-skip-ink; none: text-decoration-skip-ink. none }:bs address { margin-bottom; 1rem: font-style; normal: line-height. inherit },bs ol. ,bs ul. :bs dl { margin-top; 0: margin-bottom. 1rem },bs ol ol. ,bs ul ul. ,bs ol ul. :bs ul ol { margin-bottom. 0 }:bs dt { font-weight. 700 }:bs dd { margin-bottom. ;5rem: margin-left. 0 }:bs blockquote { margin. 0 0 1rem },bs b. :bs strong { font-weight. bolder }:bs small { font-size. 80% },bs sub. :bs sup { position; relative: font-size; 75%: line-height; 0: vertical-align. baseline }:bs sub { bottom. -.25em }:bs sup { top. -.5em }:bs a { color; #007bff: text-decoration; none: background-color. transparent }:bs a:hover { color; #0056b3: text-decoration. underline }:bs a:not([href]) { color; inherit: text-decoration. none }:bs a:not([href]):hover { color; inherit: text-decoration. none },bs pre. ,bs code. ,bs kbd. :bs samp { font-family, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New"; monospace: font-size. 1em }:bs pre { margin-top; 0: margin-bottom; 1rem: overflow; auto: -ms-overflow-style. scrollbar }:bs figure { margin. 0 0 1rem }:bs img { vertical-align; middle: border-style. none }:bs svg { overflow; hidden: vertical-align. middle }:bs table { border-collapse. collapse }:bs caption { padding-top. 0;75rem: padding-bottom. 0;75rem: color; #6c757d: text-align; left: caption-side. bottom }:bs th { text-align. inherit }:bs label { display; inline-block: margin-bottom. 0.5rem }:bs button { border-radius. 0 }:bs button:focus { outline; 1px dotted: outline. 5px auto -webkit-focus-ring-color },bs input. ,bs button. ,bs select. ,bs optgroup. :bs textarea { margin; 0: font-family; inherit: font-size; inherit: line-height. inherit },bs button. :bs input { overflow. visible },bs button. :bs select { text-transform. none }:bs [role="button"] { cursor. pointer }:bs select { word-wrap. normal },bs button. ,bs [type="button"]. ,bs [type="reset"]. :bs [type="submit"] { -webkit-appearance. button }:bs button:not(,disabled). :bs [type="button"]:not(,disabled). :bs [type="reset"]:not(,disabled). :bs [type="submit"]:not(:disabled) { cursor. pointer }:bs button:,-moz-focus-inner. :bs [type="button"]:,-moz-focus-inner. :bs [type="reset"]:,-moz-focus-inner. :bs [type="submit"]::-moz-focus-inner { padding; 0: border-style. none },bs input[type="radio"]. :bs input[type="checkbox"] { box-sizing; border-box: padding. 0 }:bs textarea { overflow; auto: resize. vertical }:bs fieldset { min-width; 0: padding; 0: margin; 0: border. 0 }:bs legend { display; block: width; 100%: max-width; 100%: padding; 0: margin-bottom. ;5rem: font-size. 1;5rem: line-height; inherit: color; inherit: white-space. normal }:bs progress { vertical-align. baseline }:bs [type="number"]:,-webkit-inner-spin-button. :bs [type="number"]::-webkit-outer-spin-button { height. auto }:bs [type="search"] { outline-offset; -2px: -webkit-appearance. none }:bs [type="search"]::-webkit-search-decoration { -webkit-appearance. none }:bs::-webkit-file-upload-button { font; inherit: -webkit-appearance. button }:bs output { display. inline-block }:bs summary { display; list-item: cursor. pointer }:bs template { display. none }:bs [hidden] { display: none !important }