Bulma：屏幕宽度超780px时level-item间无垂直内边距问题

Hey there! Let's break down why your game buttons lose vertical spacing when you expand the screen to full width, and how to fix it.

The Root Issue #

Looking at your HTML structure, you're using Bulma's level and level-item classes to arrange your game buttons. The level component is designed primarily for horizontal alignment (like navigation bars or inline content) — it doesn't include default vertical spacing between items, especially when the screen expands beyond mobile sizes. That's why things look fine on narrow screens (where items stack naturally) but get squished vertically on large displays.

Solution 1: Add Responsive Vertical Spacing with SCSS #

Since you're already using SCSS with Bulma, you can leverage Bulma's built-in breakpoint variables to add vertical spacing only on large screens. Update your SCSS code like this:

@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";

// Add vertical spacing to level items on desktop-sized screens and above
@media screen and (min-width: $desktop) {
  .level-item {
    margin-bottom: $spacing-medium; // Uses Bulma's default medium spacing variable
    // Optional: Remove spacing from the last item to avoid extra space at the bottom
    &:last-child {
      margin-bottom: 0;
    }
  }
}

This will add consistent vertical spacing between your game buttons only when the screen is at desktop size or larger, while keeping your narrow-screen layout intact.

Solution 2: Switch to a More Appropriate Layout (Columns) #

If you want to lean into Bulma's grid system instead, replacing the level structure with Bulma's columns will handle spacing automatically. Here's how to adjust your HTML:

<available-games games.bind="games" class="au-target" au-target-id="11" bindable="games">
  <div class="columns is-multiline">
    <!-- Replace level-item with column classes -->
    <div class="column is-one-third mb-4">
      <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>
    </div>
    <div class="column is-one-third mb-4">
      <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>
    </div>
  </div>
</available-games>

• columns is-multiline lets items wrap to new rows as needed
• is-one-third sets each button to take up 1/3 of the container width on large screens (adjust this to is-half or another size if you prefer)
• mb-4 adds bottom margin to each column for consistent vertical spacing

This approach is more in line with Bulma's intended grid usage and avoids needing custom media queries.

Either solution should fix the vertical spacing issue on full-width screens while keeping your mobile layout working as expected.

内容的提问来源于stack exchange，提问作者xenoterracide