使用 Bulma 阻止英雄主体顶部的内容

Question

我有一个包含全高 hero 元素的页面，我想将 <div class="hero-body"> 中的内容“粘贴”到其容器的顶部，因为现在它会自动居中，我不希望这样（这是一个仪表板......）。我该怎么办？

提前致谢。

这就是我想要的：

这是我目前的代码：

<link href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css" rel="stylesheet"/>
<section class="hero is-fullheight-with-navbar">
    <!-- Hero head: will stick at the top -->
    <div class="hero-head">
        <div class="container">
            <div class="columns is-centered">
                <div class="column is-four-fifths">
                    <nav class="navbar is-spaced" role="navigation" aria-label="main navigation">
                        <div class="navbar-brand">
                            <a class="navbar-item" href="{{ url_for('home') }}">
                                <img src="{{ url_for('static', filename='images/logo-m.png') }}" alt="logo">
                                <span class="has-text-grey-dark">&nbsp;by Artemis&trade;</span>
                            </a>
                            <a role="button" class="navbar-burger" 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="navbarBasic" class="navbar-menu">
                            <div class="navbar-end">
                                <a class="navbar-item has-text-grey" href="{{ url_for('home') }}">Home</a>

                                <div class="navbar-item">
                                    <a class="button is-primary is-rounded" href="{{ url_for('auth.login') }}">
                                        <strong>Login</strong>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    </div>

    <!-- Hero content: will be in the middle -->
    <div class="hero-body">
        <div class="container">
            <div class="columns is-centered">
                <div class="column is-narrow">
                    <aside class="menu">
                        <p class="menu-label">Servizi Arc</p>
                        <ul class="menu-list">
                            <li>
                                <a href="{{ url_for('dashboard.actions') }}" class="{{ 'is-active' if 'actions' in request.path else '' }}"><i class="fas fa-project-diagram"></i>&nbsp;Actions&trade;</a>
                                <ul style="{{ 'display: block;' if 'actions' in request.path else 'display: none;' }}">
                                    <li><a>Members</a></li>
                                    <li><a>Plugins</a></li>
                                    <li><a>Add a member</a></li>
                                </ul>
                            </li>
                            <a><i class="fas fa-shield-alt"></i>&nbsp;&nbsp;Security&trade;&nbsp;<span class="tag is-primary is-rounded">In arrivo</span></a>
                        </ul>
                    </aside>
                </div>
                <div class="column is-7">
                    <div class="box">
                        <h1 class="title has-text-weight-light">
                            Hello, <span class="has-text-weight-bold">username</span>.
                        </h1>
                        <p class="subtitle is-5 has-text-grey">Seleziona un servizio per continuare...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Hero footer: will stick at the bottom -->
    <div class="hero-foot">
        <footer style="border-top: 1px solid hsl(0, 0%, 93%); padding-top: 1.7rem;">
            <div class="container">
                <div class="columns is-vcentered is-centered has-text-centered-mobile">
                    <div class="column is-narrow">
                        <img src="{{ url_for('static', filename='images/logo-s.png') }}" alt="logo">
                    </div>
                    <div class="column is-3">
                        <h5 class="title is-5 has-text-grey-light has-text-weight-normal is-italic">
                            Arc ha come obiettivo il creare un'ecosistema semplice ma potente per aiutarti a gestire tutte le tue operazioni.
                        </h5>
                    </div>
                    <div class="column is-4 is-narrow">
                        &copy; 2020 <a href="https://rgbcraft.com" class="has-text-grey-darker">RGBCraft</a> & Artemis&trade;.
                        <br>
                        <i>Tutti i diritti riservati.</i>
                    </div>
                    <div class="column is-narrow">
                        Sitemap
                        <ul>
                            <li><a class="has-text-grey" href="{{ url_for('home') }}">Home</a></li>
                            <li><a class="has-text-grey" href="{{ url_for('auth.login') }}">Login</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </footer>
    </div>
</section>

Answer 1

基本上您要实现的目标是，将内容从底部推到顶部就是不显示顶部内容而不是将顶部的可见性设置为不可见

试试这个，（在你的 class="hero-head"）

<div class="hero-head display is-hidden-mobile">

请参阅此 documentation 以获得更多说明

Answer 2

添加以下类如下所示：

<div class="hero-body  is-align-items-stretch"> <!-- the important class is here -->
    <div class="container  is-flex">
      <div class="columns is-centered  is-flex-grow-1">
        <div class="column is-narrow">
            ....
        </div>
        <!-- the below one (is-align-self-center) is not mandatory if you don't want to center the banner -->
        <div class="column is-7 is-align-self-center">
           ....
        </div>

完整代码

<link href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css" rel="stylesheet" />
<section class="hero is-fullheight-with-navbar">
  <!-- Hero head: will stick at the top -->
  <div class="hero-head">
    <div class="container">
      <div class="columns is-centered">
        <div class="column is-four-fifths">
          <nav class="navbar is-spaced" role="navigation" aria-label="main navigation">
            <div class="navbar-brand">
              <a class="navbar-item" href="{{ url_for('home') }}">
                <img src="{{ url_for('static', filename='images/logo-m.png') }}" alt="logo">
                <span class="has-text-grey-dark">&nbsp;by Artemis&trade;</span>
              </a>
              <a role="button" class="navbar-burger" 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="navbarBasic" class="navbar-menu">
              <div class="navbar-end">
                <a class="navbar-item has-text-grey" href="{{ url_for('home') }}">Home</a>

                <div class="navbar-item">
                  <a class="button is-primary is-rounded" href="{{ url_for('auth.login') }}">
                    <strong>Login</strong>
                  </a>
                </div>
              </div>
            </div>
          </nav>
        </div>
      </div>
    </div>
  </div>

  <!-- Hero content: will be in the middle -->
  <div class="hero-body  is-align-items-stretch">
    <div class="container  is-flex">
      <div class="columns is-centered  is-flex-grow-1">
        <div class="column is-narrow">
          <aside class="menu">
            <p class="menu-label">Servizi Arc</p>
            <ul class="menu-list">
              <li>
                <a href="{{ url_for('dashboard.actions') }}" class="{{ 'is-active' if 'actions' in request.path else '' }}"><i class="fas fa-project-diagram"></i>&nbsp;Actions&trade;</a>
                <ul style="{{ 'display: block;' if 'actions' in request.path else 'display: none;' }}">
                  <li><a>Members</a></li>
                  <li><a>Plugins</a></li>
                  <li><a>Add a member</a></li>
                </ul>
              </li>
              <a><i class="fas fa-shield-alt"></i>&nbsp;&nbsp;Security&trade;&nbsp;<span class="tag is-primary is-rounded">In arrivo</span></a>
            </ul>
          </aside>
        </div>
        <div class="column is-7 is-align-self-center">
          <div class="box">
            <h1 class="title has-text-weight-light">
              Hello, <span class="has-text-weight-bold">username</span>.
            </h1>
            <p class="subtitle is-5 has-text-grey">Seleziona un servizio per continuare...</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Hero footer: will stick at the bottom -->
  <div class="hero-foot">
    <footer style="border-top: 1px solid hsl(0, 0%, 93%); padding-top: 1.7rem;">
      <div class="container">
        <div class="columns is-vcentered is-centered has-text-centered-mobile">
          <div class="column is-narrow">
            <img src="{{ url_for('static', filename='images/logo-s.png') }}" alt="logo">
          </div>
          <div class="column is-3">
            <h5 class="title is-5 has-text-grey-light has-text-weight-normal is-italic">
              Arc ha come obiettivo il creare un'ecosistema semplice ma potente per aiutarti a gestire tutte le tue operazioni.
            </h5>
          </div>
          <div class="column is-4 is-narrow">
            &copy; 2020 <a href="https://rgbcraft.com" class="has-text-grey-darker">RGBCraft</a> & Artemis&trade;.
            <br>
            <i>Tutti i diritti riservati.</i>
          </div>
          <div class="column is-narrow">
            Sitemap
            <ul>
              <li><a class="has-text-grey" href="{{ url_for('home') }}">Home</a></li>
              <li><a class="has-text-grey" href="{{ url_for('auth.login') }}">Login</a></li>
            </ul>
          </div>
        </div>
      </div>
    </footer>
  </div>
</section>

使用 Bulma 阻止英雄主体顶部的内容

Block content at the top of a hero-body with Bulma

html

css

bulma