Отзывчивый макет Drupal 8 - не показывает отзывчивое поведение в представлении рабочего стола

Я новичок на платформе Drupal 8. Для начала я пытаюсь создать адаптивный макет с помощью Bootstrap, но я не хочу использовать готовую загрузочную тему, предоставленную Drupal. Структура папок моей темы выглядит так:

themes  
  custom  
    lexus  
      css  
        style.css  
      includes  
        bootstrap  
          bootstrap-theme.css  
          bootstrap-theme.css.map  
          bootstrap.css
      templates  
          page.html.twig
      lexus.libraries.yml  
      lexus.info.yml

Содержание page.html.twig

<div id="page">
  {% if page.headline %}
     <section id="headline">
        <div class= "container">
             {{ page.headline }}
        </div>
     </section>
    {% endif %}


  <header id="header" class="header">
    <div class="container">
        {{ page.header }}
    </div>
  </header>

  <section id="main">
    <div class="container">
        <div class="row">
            <div id="content" class="col-md-9 col-sm-9 col-xs-12">
                {{ page.content }}
            </div>
          {% if page.sidebar_first %}
            <aside id="sidebar" class="sidebar col-md-3 col-sm-3 col-xs-12">
                 {{ page.sidebar_first}}
            </aside>
           {% endif %}
        </div>
    </div>
    </section>

  {% if page.footer %}
    <footer id="footer" class>
      <div class="container">
        {{ page.footer }}
      </div>
    </footer>
  {% endif %}
</div>

Содержание lexus.info.yml

name: Lexus
description: Two column responsive layout
type: theme
core: 8.x
version: 8.2.0
base theme: bartik
libraries:
  - lexus/global-styling

Содержание lexus.libraries.yml

global-styling:
  css:
    theme:
      includes/bootstrap/css/bootstrap.css: {}
      css/style.css: {}

Когда сайт загружается в режиме рабочего стола, кажется, что он не использует расположение столбцов начальной загрузки. Раздел content занимает всю ширину браузера и размещает содержимое sidebar_first под ним. Вот скриншот моего рабочего стола:

введите описание изображения здесь

Но когда я изменяю размер своего браузера для мобильного просмотра, похоже, что отзывчивость работает. Вот скриншот мобильного просмотра.

введите описание изображения здесь

Пожалуйста, помогите мне понять, что я делаю неправильно.


person Subrata Sarkar    schedule 14.10.2016    source источник


Ответы (1)


Это может быть связано с тем, что загрузчик считает ваше устройство «большим», когда оно развернуто. В настоящее время у вас нет класса "col-lg-X". Попробуйте изменить

<div id="content" class="col-md-9 col-sm-9 col-xs-12">

to

<div id="content" class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
person Kaizen9001    schedule 18.10.2016