侧边栏区域内容显示在drupal 8的主要内容之下

时间:2018-11-11 16:06:05

标签: twig yaml drupal-8

我在drupal 8.6中创建了一个自定义主题。一切正常,但是由于某种原因,如果我在侧边栏区域中放置内容,它将在我的主要内容之后进入页面底部。任何有关如何解决此问题的建议将不胜感激。谢谢

这是我的page.html.twig

<div class="layout-container">

<header role="banner">
{{ page.header }}
</header>

<main role="main">
<a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}

<div class="layout-content">
  {{ page.content }}
</div>{# /.layout-content #}

{% if page.sidebar %}
  <aside class="layout-sidebar-first" role="complementary">
    {{ page.sidebar }}
  </aside>
{% endif %}

</main>

{% if page.footer %}
<footer role="contentinfo">
  {{ page.footer }}
</footer>
{% endif %}

</div>{# /.layout-container #}

st_saviours.info.yml文件

name: St Saviours
description: Drupal 8 theme
type: theme
core: 8.x
libraries:
  - st_saviours/global-css
  - st_saviours/global-js
stylesheets-remove:
  - core/themes/stable/css/views/views.module.css
  - core/themes/stable/css/system/components/align.module.css
regions:
  header : 'Header'
  content: 'Main Content'
  footer: 'Footer'
  sidebar : 'Sidebar'

1 个答案:

答案 0 :(得分:0)

我使用了引导网格布局来安排page.html.twig文件中的主要内容和侧边栏。

<main role="main">
<a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
<div class="col-md-12">
  <div class="row">



      {% if (page.first_sidebar and page.second_sidebar) %}
        <div class="col-md-4">
          <aside class="layout-sidebar-first" role="complementary">
            {{ page.first_sidebar }}
          </aside>
        </div>

        <div class="col-md-5">
            <div class="layout-content">
              {{ page.content }}
            </div>{# /.layout-content #}
        </div>


        <div class="col-md-3">
          <aside class="layout-sidebar-second" role="complementary">
            {{ page.second_sidebar }}
          </aside>
        </div>
      {% else %}
        <div class="col-md-12">
          <div class="row">
            <div class="layout-content">
              {{ page.content }}
            </div>{# /.layout-content #}
          </div>
        </div>
      {% endif %}

  </div>  
</div>
</main>
相关问题