0

我在使用 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 图片

反应灵敏

主题是默认的

4

1 回答 1

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

于 2019-10-04T19:02:16.687 回答