Bulma：当扩展超过 780px 时，级别项目之间没有填充

Question

我有这个html

<body aurelia-app="main">


  <section class="section is-small">
    <nav-bar class="au-target" au-target-id="5">
  <div class="container">
    <nav class="navbar" role="navigation" aria-label="main navigation">
      <div class="navbar-brand">
        <a class="navbar-item au-target" route-href="route: home" au-target-id="1" href="#/">
          <span class="icon is-medium">
            <i class="fas fa-lg fa-home" aria-hidden="true"></i>
          </span>
        </a>
        <a role="button" click.delegate="burgerClicked()" aria-label="menu" aria-expanded="false" data-target="myNavBar" class="au-target navbar-burger burger" au-target-id="2">
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>

      <div id="myNavBar" class="au-target navbar-menu" au-target-id="3">
        <div class="navbar-start">
          <div class="navbar-item">
            <a route-href="route: games" class="au-target" au-target-id="4" href="#/games">My Games</a>
          </div>
        </div>
      </div>
    </nav>
  </div>
</nav-bar>
    <router-view name="main" class="container au-target" au-target-id="6">


  <available-games games.bind="games" class="au-target" au-target-id="11" bindable="games">

  <div class="columns">
    <ul class="column level">
      <li class="level-item">
        <game-button game.bind="game" is-available.call="isAvailable( $game )" class="au-target container" au-target-id="9" bindable="game,isAvailable">
  <button class="button is-fullwidth is-success au-target" click.delegate="addToMyGames()" disabled.bind="!available" au-target-id="7">
    Warhammer 40k
  </button>
</game-button>
      </li><li class="level-item">
        <game-button game.bind="game" is-available.call="isAvailable( $game )" class="au-target container" au-target-id="9" bindable="game,isAvailable">
  <button class="button is-fullwidth is-success au-target" click.delegate="addToMyGames()" disabled.bind="!available" au-target-id="7">
    Age of Sigmar
  </button>
</game-button>
      </li><!--anchor-->
    </ul>
  </div>
</available-games>
</router-view>
  </section>
</body>

它看起来不错，直到我一直展开它，然后在全宽按钮之间没有 space（高度方面）。我想，我对应该如何使用 bulma 有一些误解。

很好坏的

注意：这是我scss的范围

@import "~bulma";
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";

$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import "~@fortawesome/fontawesome-free/scss/regular.scss";
@import "~@fortawesome/fontawesome-free/scss/solid.scss";

Answer 1

首先，一个提示：稍微修正一下格式，使其对读者更一致 - HTML 层次结构更加清晰。

可能的步骤：

1) 看起来您可能需要在某些 <style> 标签内或针对特定 class attribute/element 的 scss 文件中的每个 <button> 元素之间进行一些填充你需要。

2) 我对您的 <game-button> 元素感到困惑。它是您创建的自定义元素吗？如果不是，请参阅 MDN Web Docs 以了解如何在需要时创建自定义 HTML 元素的示例。

3) 如果 <game-button> 不是您创建的自定义元素，请参阅 Bulma's documentation for buttons 因为 Bulma 只需要 <button> 元素即可工作（并且间距不是问题） .

4) 查看这个 GitHub post 关于按钮间距的内容。尽管它们的实现不同，但您可能仍需要将按钮包装在 <div class="buttons"></div> 元素中。如果垂直对齐不一致后出现问题，我建议使用 CSS display: flex;、align-items: center 和 justify-content: center 居中对齐。

Bulma：当扩展超过 780px 时，级别项目之间没有填充

Bulma: No padding between level-item when expanded past 780px

html

css

sass

bulma