bulma 示例未达到预期结果

问题描述 投票：0回答：1

我无法让导航栏按我想要的方式工作。我正在使用最新的 bulma.io css 文件。一般来说，我发现 bulma 页面本身显示的内容与我的 Chrome 窗口有点不同......并非所有示例都像文本所说的那样工作。

所以我尝试将其简化，最终我想要的只是左侧的徽标和下拉菜单以及右侧的按钮：

因此减少了代码来尝试

<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css" rel="stylesheet"/>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>test</title>
   </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" width="112" height="28">
      </a>

   </div>

 
   <div class="navbar-end">
      <div class="navbar-item has-dropdown is-hoverable">
         <a class="navbar-link">
            More
         </a>
         <div class="navbar-dropdown is-boxed">
            <a class="navbar-item">
               test
            </a>
            <a class="navbar-item">
               test 2
            </a>
         </div>
      </div>
      <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>
 </nav>
    </body>
</html>

但是我得到了：

（“更多”上用于切换菜单的按钮不起作用）。

html css bulma
1个回答
0
投票

试试这个：

在您的代码中添加以下 CSS 样式。

.navbar{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.navbar-end{
    display: flex;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css" rel="stylesheet"/>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>test</title>
   </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" width="112" height="28">
      </a>

   </div>

 
   <div class="navbar-end">
      <div class="navbar-item has-dropdown is-hoverable">
         <a class="navbar-link">
            More
         </a>
         <div class="navbar-dropdown is-boxed">
            <a class="navbar-item">
               test
            </a>
            <a class="navbar-item">
               test 2
            </a>
         </div>
      </div>
      <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>
 </nav>
    </body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.