使用bootstrap，底部的波形看起来很奇怪

Bootstrap 是一个流行的前端框架，用于快速构建响应式网页设计。如果你在使用 Bootstrap 时发现底部的波形（通常是指页脚或导航栏的底部边缘）看起来很奇怪，可能是由于以下几个原因：

基础概念

CSS 样式冲突：Bootstrap 的样式可能与其他自定义样式或第三方库的样式发生了冲突。
HTML 结构问题：页脚或导航栏的 HTML 结构可能不符合 Bootstrap 的要求。
浏览器兼容性：不同浏览器对 CSS 的渲染可能存在差异。

解决方法

以下是一些常见的解决方法：

1. 检查 CSS 样式冲突

确保没有其他 CSS 文件覆盖了 Bootstrap 的样式。可以通过浏览器的开发者工具（通常是按 F12 打开）检查元素的样式，查看是否有其他样式影响了底部波形。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Footer Issue</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* 自定义样式 */
        .footer {
            background-color: #f8f9fa;
            padding: 20px 0;
            border-top: 1px solid #dee2e6;
        }
    </style>
</head>
<body>
    <footer class="footer">
        <div class="container">
            <p class="text-muted">© 2023 Your Company. All rights reserved.</p>
        </div>
    </footer>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

2. 确保正确的 HTML 结构

确保页脚或导航栏的 HTML 结构符合 Bootstrap 的要求。例如，页脚通常应该放在一个容器内。

<footer class="footer bg-light">
    <div class="container">
        <p class="text-muted">© 2023 Your Company. All rights reserved.</p>
    </div>
</footer>

3. 检查浏览器兼容性

不同浏览器对 CSS 的渲染可能存在差异。可以使用 CSS 前缀工具（如 Autoprefixer）来确保样式在不同浏览器中的一致性。

4. 使用 Bootstrap 的实用类

Bootstrap 提供了一些实用的 CSS 类来帮助解决布局问题。例如，可以使用 mt-auto 类来自动调整页脚的位置。

<footer class="footer bg-light mt-auto">
    <div class="container">
        <p class="text-muted">© 2023 Your Company. All rights reserved.</p>
    </div>
</footer>