Question

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

它显示为全宽，但我真的希望能够让它更窄，或者可以调整到内容的宽度。

以下是目前的情况：

闭：

打开：

对于汉堡菜单下拉菜单，“布尔玛”页面上的所有示例似乎都达到了导航栏的整个宽度。（虽然对于导航栏中的下拉列表不是这样）。有谁知道我怎么能让它不是全宽？我的意思是，我可以在max-width: 50%;上轻松添加.navbar-menu等，但我不知道如何将菜单div“粘贴”到导航栏的右侧，因为它不会看起来非常漂亮地与左边对齐：

我觉得我错过了这里显而易见的事实，如果有人能把我放在正确的道路上，我会非常感激！

代码填充

我的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”position）与其最近的祖先相关的元素）。如果菜单项不完全适合，您可能必须调整左侧％，如果菜单项垂直移位，还可以指定顶部或底部偏移。

Bulma navbar：如何在下拉列表中设置菜单样式？

代码填充

更新

2 个答案: