Bootstrap行内菜单项屏幕缩小时避免重叠并保持同行问题

要让行内菜单项在屏幕尺寸缩小时不重叠且始终保持同一行，通过Bootstrap内置的flex布局类即可实现：

修改方案 #

给包裹菜单项的.row容器添加flex-nowrap类，强制所有子元素在同一行排列，避免换行；同时给每个菜单项的链接设置不折行样式，确保内容完整显示。

修改后的完整代码 #

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My menu</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <style>
    .menu-item a {
      white-space: nowrap;
      padding: 0 1rem; /* 可选：增加内边距，避免内容过度拥挤 */
    }
  </style>
</head>

<body>
  <div class="container-fluid">
    <div class="row flex-nowrap">
      <div class="col-auto menu-item">
        <a>Main page</a>
      </div>
      <div class="col-auto menu-item">
        <a>Second page</a>
      </div>
      <div class="col-auto menu-item">
        <a>Third page</a>
      </div>
    </div>
  </div>
</body>

</html>

效果说明 #

• flex-nowrap：强制.row内的所有子元素保持在同一行，不会因屏幕宽度不足换行。
• white-space: nowrap：确保每个菜单项的文字不会折行，从根源避免内容重叠。
• 可选的padding：增加菜单项之间的间距，提升整体视觉舒适度。

如果屏幕宽度小于所有菜单项的总宽度，容器会自动出现横向滚动条，保证所有菜单项始终在同一行且完整显示。

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