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

【问题标题】：sidebar region content showing below main content in drupal 8侧边栏区域内容显示在 drupal 8 的主要内容下方
【发布时间】：2018-11-11 16:06:04
【问题描述】：

我在 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'

【问题讨论】：

标签： twig yaml drupal-8

【解决方案1】：

我使用引导网格布局来安排 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>

【讨论】：