如何在Bulma框架中自定义Navbar组件？

Question

我想要导航栏组件中 元素的全宽。我怎样才能做到这一点。我也对类似这样的一些关键字感兴趣。

这是我的错误：

我想要这样的全角布局，无论 Chrome 窗口的大小如何。

我是 Bulma 的新人，我尝试阅读 NavBar Bulma 官方文档中可以找到的任何内容，我很难自定义这个框架。

NavBar.vue

......
  <nav
    class="navbar is-info is-fixed-top"
    role="navigation"
    aria-label="main navigation"
  >
    <div class="container is-max-desktop px-4">
      <div class="navbar-brand">
        <div class="navbar-item is-size-4 is-family-monospace">Noteballs</div>

        <a
          @click="showMobileNav = !showMobileNav"
          role="button"
          class="navbar-burger"
          :class="{ 'is-active': showMobileNav }"
          aria-label="menu"
          aria-expanded="false"
          data-target="navbarBasicExample"
        >
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>

      <div
        id="navbarBasicExample"
        class="navbar-menu"
        :class="{ 'is-active': showMobileNav }"
      >
        <div class="navbar-end">
          <router-link to="/" class="navbar-item" active-class="is-active"
            >Notes</router-link
          >
          <router-link to="/stats" class="navbar-item" active-class="is-active"
            >Stats</router-link
          >
        </div>
      </div>
    </div>
.....

ViewNotes.vue

<template>
  <div class="notes">
    <div class="has-background-success-dark p-4 mb-5">
      <div class="field">
        <!-- <label class="label">Message</label> -->
        <div class="control">
          <textarea class="textarea" placeholder="Add a new note"></textarea>
        </div>
      </div>
      <div class="field is-grouped is-grouped-right">
        <div class="control">
          <button class="button is-link has-background-success">Add New Note</button>
        </div>
      </div>
    </div>
    <div v-for="i in 3" class="card mb-4">
      <div class="card-content">
        <div class="content">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium
          adipisci, odit saepe sequi rem animi odio? Vitae sequi ea dolorum
          laboriosam a, quos, amet animi, esse id nobis vel ad.
        </div>
      </div>
      <footer class="card-footer">
        <a href="#" class="card-footer-item">Edit</a>
        <a href="#" class="card-footer-item">Delete</a>
      </footer>
    </div>
  </div>
</template>

Answer 1

Bulma 可能不是您在这里寻找的框架，因为这个具体原因。

默认垂直

Bulma 中的每个元素都是移动优先，并针对垂直阅读进行了优化，因此默认情况下在移动设备上： ...
导航菜单将被隐藏

同时，所有优秀的 UI 库都是移动优先的。因此，如果您不想要这样的行为，您可能应该覆盖它，但是使用一个无论如何都不会按您想要的方式运行的东西有什么意义呢？

我仍然认为你应该考虑移动用户，因为人们的设备通常可能比你小。

不幸的是，我还没有找到任何方法来更改默认断点。
也许可以尝试一下 TailwindCSS 或基于它的 UI 库，这样你就可以更灵活地根据自己的喜好更改断点（如果你想打破流行的 UX 规则）。