导入bootstrap.min.css导致全站元素尺寸变大的问题求助

核心原因 #

Bootstrap自带全局样式重置规则（比如默认字体大小、盒模型、元素间距等），全局导入后会覆盖项目中原有的基础样式，进而导致全站元素尺寸异常变化。

具体解决办法 #

1. 移除全局Bootstrap CSS导入（优先推荐） #

你使用的mdb-react-ui-kit本身已经内置了Bootstrap核心样式支持，不需要单独导入bootstrap/dist/css/bootstrap.min.css。直接删除这行代码即可：

import 'bootstrap/dist/css/bootstrap.min.css';

删除后MDB组件的样式仍能正常工作，同时不会污染全站样式。

2. 将Bootstrap样式作用域限制在当前组件内 #

如果确实需要Bootstrap的额外样式，不要全局导入，而是在组件专属CSS文件（kontakt.css）中通过局部作用域导入：

/* 在kontakt.css中添加 */
.kontakt-container {
  @import 'bootstrap/dist/css/bootstrap.min.css';
}

然后给组件的根容器添加这个类：

function Kontakt() {
  return (
    <div className="kontakt-container">
      <form id='form' className='text-center' style={{ width: '100%', maxWidth: '300px' }}>
        {/* 表单内容保持不变 */}
      </form>
    </div>
  );
}

这种方式会让Bootstrap样式仅作用于.kontakt-container内部的元素，不会影响全站其他部分。

3. 覆盖Bootstrap全局样式 #

如果必须全局导入Bootstrap，可以在项目全局样式文件中覆盖Bootstrap的默认基础样式，例如调整字体大小：

/* 全局样式文件中添加 */
body {
  font-size: 14px !important; /* 替换为你项目原本的字体大小 */
  box-sizing: content-box !important; /* 若盒模型冲突可调整此属性 */
}

这种方式需要手动排查具体冲突点，适合有一定CSS基础的场景。

内容的提问来源于stack exchange，提问作者Ozan Karakus