星云响应式布局

Question

我无法将我的响应式布局留给 nebular，这将是我第一次使用 ... 使用 bootstrap 和 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张图片

反应灵敏

主题是默认的

Answer 1

我从最后一行了解到的是，您正试图在一行中显示所有图片。我不确定是否加载了引导库，但以下内容将全部显示在一行中：

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

NbLayoutColumnComponent

确定内容位置的容器组件 布局。布局可以包含无限的列（不包括 边栏）。

从上面的描述来看，这意味着它不会影响你<div class="row">的风格，而是位置。

关于NbCard，卡片的页眉、主体和页脚都带有白色背景和边框阴影，与引导卡片一样，它不会影响您的 div 元素的样式。

• 确保已加载引导库
• 检查<div class="row"> 并查看是否应用了引导样式或是否有任何其他样式覆盖它。

为了响应：使用引导列。

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