Сборка Gatsby не реагирует на префикс размера bootstrap после перезагрузки страницы - PullRequest
Новая
       19

Сборка Gatsby не реагирует на префикс размера bootstrap после перезагрузки страницы

1 голос
/ 27 января 2020

У меня проблема с Гэтсби bootstrap или react-bootstrap (пока не уверен, скорее всего, это bootstrap). Все выглядит великолепно, когда я создаю и обслуживаю сайт gatsby, у него есть все bootstrap классы и хорошая сетка (2 столбца, один - md="8", другой - md="4"). Но как только я перезагружаю страницу и проверяю код в браузере Chrome, классы bootstrap исчезают.

Код на странице Gatsby (добавлен className только для того, чтобы убедиться, что он не приходит после reaload) : 

{window.innerWidth > 992 ? (
  <Col md="8">
    <NameAndHealine />
    <ListingText />
  </Col>
  <Col md="4">
    <PricingSidebBar />
  </Col>
) : (
  <Col xs="12">
     <NameAndHealine />
  </Col>
  <Col xs="12">
     <PricingSidebBar />
  </Col>
  <Col xs="12" className="mt-5">
     <ListingText />
  </Col>
)

Пример кода перед перезагрузкой страницы: 

<div class="col-md-8">...</div>
<div class="col-md-4">...</div>

Пример кода после перезагрузки страницы: 

<div class="col-12">...</div>
<div class="col-12">...</div>

Шаги, которые я пытался решить, для решения проблемы:

  1. Импорт bootstrap.css и bootstrap.js внутри gatsby-browser.js
  2. Добавьте дополнительное имя_класса с bootstrap классами, чтобы убедиться, что оно не приходит после перезагрузки страницы.

РЕДАКТИРОВАТЬ:

Я обнаружил проблему, это с window.innerWidth, как я заказывал компоненты в зависимости от этого. Я изменил его на несколько строк и установил классы отображения для разных экранов. После перезагрузки страницы Гэтсби не берет уроки, когда он находится внутри if (window.innerWidth > 992) (почему?). Если кто-то знает ответ, пожалуйста, дайте мне знать, спасибо.

РЕДАКТИРОВАТЬ 2

Добавлен дополнительный код выше

...