Небулярный отзывчивый макет - PullRequest
Новая
       25

Небулярный отзывчивый макет

0 голосов
/ 04 октября 2019

У меня не получается оставить отзывчивый макет с помощью nebular, это будет первый раз, когда я использую ... Настройки по умолчанию при использовании начальной загрузки и Angular,

тело макета будет: 

<nb-layout>

  <nb-layout-header>
  
responsive nav left side a logo with welcome writing right side a logo. 

"I managed to make the less responsive"
  </nb-layout-header>

  <nb-layout-column>
  here would be all the rest of the layout,
Big problem would be here I am not able to make the correct divisions like row and col,
It's not getting responsive.
  </nb-layout-column>

</nb-layout>

вот мой код: 

.clienteLogo {
  margin-left: 1%;
}
.testeLogo {
  margin-left: auto;
  margin-right: 1%;
}

.boasVindas {
  padding-left: 20px;
}
<nb-layout>

  <nb-layout-header>
    <img class="clienteLogo" src="../assets/clientlogo.svg">
    <span class="boasVindas">Olá Cliente, seja bem vinda.</span>
    <img class="testeLogo" src="../assets/teste.svg">
  </nb-layout-header>


  <nb-layout-column>

 
    <div class="row">

        <div class="col-md-3 col-lg-3 col-xxxl-3">

          <a id="reports">
            <img class="reportsimg1 " src="../assets/shortcuts-daily.svg">
          </a>

        </div>
        <div class="col-md-3 col-lg-3 col-xxxl-3">
            <img class="reportsimg1" src="../assets/shortcuts-teste.svg">
        </div>
        <div class="col-md-3 col-lg-3 col-xxxl-3">
          <img class="reportsimg1" src="../assets/shortcuts-report.svg">
        </div>
        <div class="col-md-3 col-lg-3 col-xxxl-3">
          <img class="reportsimg1" src="../assets/shortcuts-inteligencia.svg">
        </div>
  </div>

  </nb-layout-column>

</nb-layout>

Я пытался положить карточку в колонку, но также не смог:

та же строка

1 изображение |2 фото |3 фото |4 изображения

адаптивные

темы по умолчанию

1 Ответ

1 голос
/ 04 октября 2019

Что я понимаю из последней строки, так это то, что вы пытаетесь отобразить все картинки в одном ряду. Я не уверен, загружена ли библиотека начальной загрузки или нет, но следующее отобразит все это в одной строке: 

.row {
  display: flex;
  flex-direction: column:
}

NbLayoutColumnComponent

Контейнерный компоненткоторый определяет позицию содержимого внутри макета. Макет может содержать неограниченное количество столбцов (не считая боковых панелей).

Из приведенного выше описания это означает, что это не окажет никакого влияния на стиль вашего <div class="row">, но и на позицию.

Что касается NbCard, у карты есть верхний и нижний колонтитулы, тело и нижний колонтитул с белым фоном и окаймленной тенью, такие же, как у карт начальной загрузки, и это не влияет на стиль ваших элементов div.

  • Makeубедитесь, что библиотека начальной загрузки загружена
  • Проверьте <div class="row"> и посмотрите, применяются ли стили начальной загрузки или какие-либо другие стили переопределяют его.

Для отзывчивости: используйте столбцы начальной загрузки.

https://akveo.github.io/nebular/docs/components/layout/overview#nblayoutcomponent

...