为什么使用 bootstrap 会改变 css 布局？

Question

我正在使用Bootstrap Progress Bars。这是我的代码：

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container">
  <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:1%">
      1%
    </div>
  </div>
</div>

它改变了网站的显示输出。你知道这是为什么吗？我用的是WordPress。

Answer 1

Bootstrap css 文件，包含一个 reset 强制所有元素在所有浏览器上看起来都一样。

因此，如果 bootstrap.css 包含在您的 .css 之后，将导致全局覆盖您的 .css；如果 bootstrap.css 包含在您的 .css 之前，如果您还使用某种重置，它将导致损坏 bootstrap UI。

这里可以找到更多关于重置的信息：https://css-tricks.com/reboot-resets-reasoning/

我的建议是，如果您有超过 30% 的自定义样式，请切换到不同于 bootstrap 的其他样式，例如顺风css.

如果您有超过 50% 的自定义样式，请使用 Sass，这是编写 css.

的一种简洁方式

尤金，愿虫子远离你。

为什么使用 bootstrap 会改变 css 布局？

Why does using bootstrap change css layout?

css

progress-bar

bootstrap-modal