Bulma: нет отступа между уровнями, когда развернуто выше 780px - PullRequest
Новая
       31

Bulma: нет отступа между уровнями, когда развернуто выше 780px

0 голосов
/ 28 февраля 2020

У меня есть это 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>

выглядит нормально, пока я не разверну его полностью, и тогда между кнопками полной ширины не будет места (по высоте). Полагаю, я неправильно понимаю, как мне следует использовать булму.

хорошо good version плохо bad version

примечание: это степень моего с css

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

1 Ответ

1 голос
/ 02 марта 2020

Прежде всего, совет: исправьте немного форматирование, чтобы сделать его более согласованным для читателей - больше ясности в иерархии HTML.

Возможные шаги:

1) Похоже, что вам может понадобиться заполнение между каждым элементом <button> внутри некоторых тегов <style> или в вашем файле * css, которые нацелены на необходимый атрибут / элемент класса c.

2) Я запутался в вашем элементе <game-button>. Это пользовательский элемент, который вы создали? Если это не так, посмотрите MDN Web Docs для примеров того, как создавать пользовательские элементы HMTL, если вам это нужно.

3) Если <game-button> не является созданным вами пользовательским элементом, см. Документация Bulma для кнопок , поскольку для работы Bulma требуется только элемент <button> (и пробелы не будут проблемой).

4) Ознакомьтесь с этим GitHub post относительно расстояния между кнопками. Хотя их реализация отличается, вам все равно может понадобиться обернуть ваши кнопки в элемент <div class="buttons"></div>. Если после этого возникают проблемы с несовместимым вертикальным выравниванием, я бы предложил использовать CSS display: flex;, align-items: center и justify-content: center для центрированного выравнивания.

...