Bulma移动端Navbar按钮错位，需取消Hamburger并右对齐显示

问题根源拆解 #

1. 结构错误：navbar-end 应该与 navbar-start 同级，而非嵌套在 navbar-start 内部，这是按钮无法右对齐的核心原因
2. 框架冲突：同时引入Bootstrap和Bulma会导致大量样式冲突，必须移除其中一个（这里保留Bulma）
3. 小屏显示逻辑：Bulma默认在小屏幕下隐藏navbar-menu并显示汉堡按钮，需要自定义CSS覆盖这个行为

修正后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@6.5.95/css/materialdesignicons.min.css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
  <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=Montserrat:wght@500;600;700&display=swap" rel="stylesheet">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 强制navbar-menu在所有屏幕尺寸下显示 */
    @media screen and (max-width: 1023px) {
      .navbar-menu {
        display: flex !important;
      }
      /* 隐藏汉堡按钮 */
      .navbar-burger {
        display: none !important;
      }
    }
  </style>
</head>
<body>
  <nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
      <a class="navbar-item" href="https://bulma.io">
        <img src="https://bulma.io/images/bulma-logo.png">
      </a>
    </div>
    <div id="navbarBasicExample" class="navbar-menu">
      <!-- navbar-start 用于左侧内容（如果有的话） -->
      <div class="navbar-start">
        <!-- 可添加左侧导航链接 -->
      </div>
      <!-- navbar-end 与 navbar-start 同级，实现右侧对齐 -->
      <div class="navbar-end">
        <div class="navbar-item">
          <div class="buttons">
            <a class="button is-primary">
              <strong>Sign up</strong>
            </a>
            <a class="button is-light">
              Log in
            </a>
          </div>
        </div>
      </div>
    </div>
  </nav>
</body>
</html>

关键修改说明 #

• 移除Bootstrap的CSS引入，消除框架样式冲突
• 调整Navbar结构，将navbar-end与navbar-start同级放置，确保按钮右对齐
• 添加自定义CSS，在小屏幕下强制显示navbar-menu并隐藏汉堡按钮
• 移除按钮上多余的navbar-end类，该类仅作用于容器元素而非按钮本身

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