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

Question

我想应用这种风格 <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：

<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 是通用的。将它们更改为您想要的任何内容。

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

要应用所有这些，请将您的元素包装到 <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
}