如何让Nav元素内按钮均匀排列并增大间距？求Bootstrap优化方案

需求：让导航栏中的按钮均匀排列且间距更大，同时保证页面响应式；尝试用Bootstrap的d-flex类未成功，希望优化现有的Bootstrap列布局。

修改后的完整代码 #

HTML #

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="styles.css">
        <script src="scripts.js"></script>
        <title>Dädalus</title>
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Caveat" rel="stylesheet">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
    </head>
    <body>
        <video id="background-video" src="img/video (2160p).mp4" autoplay muted loop></video>
        <div class="container-fluid wrapper-1">
            <!-- 标题行：用mx-auto替代空列实现居中 -->
            <div class="row py-4">
                <div class="col-md-6 col-10 mx-auto d-flex align-items-center justify-content-center">
                    <h2 class="head-sentence">Dädalus</h2>
                </div>
            </div>
            <!-- 导航行：优化布局，去掉空列 -->
            <div class="row nav-bar">
                <div class="col-md-8 col-11 mx-auto d-flex align-items-center justify-content-center">
                    <!-- 给nav添加flex类实现按钮均匀排列 -->
                    <nav class="d-flex w-100 justify-content-around gap-3 gap-md-5" style="margin-top: 20px;">
                        <button class="Start-Button" onclick="menuButton(this)">Start</button>
                        <button class="Shop-Button" onclick="menuButton(this)">Produkte</button>
                        <button class="Kontakt-Button" onclick="menuButton(this)">Kontakt</button>
                    </nav>
                </div>
            </div>
        </div>
    </body>
</html>

CSS #

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.wrapper-1 {
    position: relative;
    overflow: hidden;
    min-height: 30vh; /* 确保容器高度适配视频 */
}

#background-video {
    height: 30vh;
    width: 100%;
    position: absolute;
    object-fit: cover;
}

.head-sentence {
    color: yellow;
    text-align: center;
    font-family: "Black Ops One";
    font-size: clamp(2rem, 6vh, 4rem); /* 响应式字体大小 */
    padding: 10px 20px;
    border: 5px solid yellow;
    border-radius: 10px;
    backdrop-filter: blur(5px);
    margin: 0; /* 移除默认margin避免错位 */
}

.Start-Button, .Shop-Button, .Kontakt-Button {
    color: yellow;
    background-color: transparent;
    font-family: "Black Ops One";
    text-decoration: underline;
    backdrop-filter: blur(5px);
    border-radius: 5px;
    border: none;
    padding: 8px 16px; /* 增加内边距，提升点击区域和视觉间距 */
    font-size: clamp(1rem, 2.5vh, 1.5rem); /* 响应式字体 */
    transition: all 0.2s ease;
}

/* 按钮hover效果增强交互 */
.Start-Button:hover, .Shop-Button:hover, .Kontakt-Button:hover {
    background-color: rgba(255, 255, 0, 0.1);
    text-decoration: none;
}

JavaScript（可选优化版） #

// 优化逻辑：用data属性替代class判断，更简洁易维护
function menuButton(button) {
    const targetUrl = button.dataset.target;
    if (targetUrl) {
        window.location.href = targetUrl;
        console.log(`redirected to '${targetUrl}'`);
    } else {
        console.error("menuButton: ERROR / No target URL found!");
    }
}
// 对应HTML按钮需修改为：<button class="Start-Button" data-target="index.html" onclick="menuButton(this)">Start</button>

核心修改说明 #

• 导航按钮布局修复：
  给<nav>标签添加d-flex w-100 justify-content-around gap-3 gap-md-5类：

  • d-flex将导航转为弹性布局，这是之前遗漏的关键一步（仅给父容器加flex无效，需给按钮的直接容器nav设置）
  • w-100让导航占满父容器宽度，确保均匀分布生效
  • justify-content-around让按钮在容器内均匀分配空间
  • gap-3 gap-md-5设置按钮间的基础间距，大屏幕下自动增大

• Bootstrap列布局优化：
  移除所有空的<div class="col-xx">占位，改用mx-auto（水平居中）配合col-md-6 col-10这类响应式列宽，既实现居中效果，又减少冗余代码，提升可读性。

• 响应式增强：
  使用clamp()函数设置字体大小，确保在不同屏幕尺寸下文字大小自动适配；给按钮增加内边距，提升移动端点击体验。

• 细节优化：
  给按钮添加hover交互效果，移除默认边框，将背景色改为transparent更语义化，同时确保视频容器有最小高度避免内容错位。

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