Bulma 导航栏：如何设置下拉菜单的样式？

Question

我用的是Bulma navbar，功能真的很棒！我的问题是：在较小的屏幕上，当通过单击汉堡菜单将导航栏菜单显示为下拉菜单时 - 我该如何设计它？

它显示为全角，但我真的希望能够将它变窄，或者调整到内容的宽度。

这是目前的样子：

关闭：

打开：

对于汉堡菜单下拉菜单，Bulma 页面上的所有示例似乎都达到了导航栏的整个宽度。（尽管对于导航栏内的下拉菜单并非如此）。有谁知道我怎样才能让它不是全角的？我的意思是，我可以轻松地在 .navbar-menu 上添加 max-width: 50%; 等，但我不知道如何在 div 'stick' 的右侧制作菜单导航栏，因为它向左对齐看起来不太好：

我觉得我在这里遗漏了明显的东西，如果有人能让我走上正确的道路，我将不胜感激！

代码资料

我的 HTML 看起来基本上和 Bulma docs 完全一样，但为了以防万一，我会在这里添加它：

<nav class="navbar" role="navigation">
   <div class="navbar-brand">
      <div class="navbar-item">
         <p class="title"><span>title here</span></p>
      </div>
      <div class="button navbar-burger is-active">
         <span></span>
         <span></span>
         <span></span>
      </div>
   </div>
   <div class="navbar-menu is-active">
      <div class="navbar-end">
         <div class="navbar-item">
            <div>menu item 1</div>
         </div>
         <div class="navbar-item">
            <div>menu item 2</div>
         </div>
      </div>
   </div>
</nav>

需要说明的是，因为这是一个常见问题，我对导航栏的功能没有任何问题 - 只是想获得样式方面的建议。

更新

下面，@sol 写了关于添加 max-width: 50%; 和 float: right; 作为解决方案。虽然在视觉上，它不太正确：

关闭（看起来正常）：

打开（呃哦对齐）：

Answer 1

您可以通过将一些 flexbox 属性应用于 .navbar-menu 及其容器来创建此布局。

您需要将这些规则包装在媒体查询中，以确保它不会影响较大屏幕尺寸的菜单。

fiddle

@media screen and (max-width: 1023px) {
  .navbar {
    display: flex;
    flex-wrap: wrap;
  }
  .navbar-brand {
    min-width: 100%;
  }
  .navbar-menu {
    margin-left: auto;
    min-width: 50%;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css" rel="stylesheet" />
<nav class="navbar" role="navigation">
  <div class="navbar-brand">
    <div class="navbar-item">
      <p class="title"><span>title here</span></p>
    </div>
    <div class="button navbar-burger is-active">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
  <div class="navbar-menu is-active">
    <div class="navbar-end">
      <div class="navbar-item">
        <div>menu item 1</div>
      </div>
      <div class="navbar-item">
        <div>menu item 2</div>
      </div>
    </div>
  </div>
</nav>
<div class="section content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, provident quasi nulla fugiat libero nemo tempora adipisci quisquam voluptatibus blanditiis suscipit cupiditate obcaecati numquam, odio eligendi repellendus! Commodi, mollitia, modi!</p>
</div>

Answer 2

您可以试试下面的造型：

.navbar {
 position:relative;
}
.navbar-end {
 position:absolute;
 left:50%;    
}
.navbar-menu {
 max-width:50%;
}

这样“.navbar”将相对于其当前位置进行定位，这将允许“.navbar-end”作为其降序子元素之一相对于“.navbar”进行定位（"position:absolute" 相对于其最近定位的祖先定位元素）。如果它不完全适合，您可能需要调整左边的 %，如果菜单项垂直移动，您还需要指定顶部或底部偏移量。

Bulma 导航栏：如何设置下拉菜单的样式？

Bulma navbar: how to style the menu on dropdown?

css

bulma

代码资料

更新