Question

我是Angular + Bootstrap的新手，并在这里发布了此内容，因为我到处都是，无法弄清楚。

基本上，我需要一个页面，该页面的顶部具有固定的导航栏，然后需要在其下方的一行填充屏幕的其余部分。该行包含2列-左边一列充当较窄的侧列，另一列充当主要内容区域。我可以根据需要调整大小。

在此之前，这是我到目前为止的代码：

主要应用组件：

<!--Main Application Level Layout and Structure.-->
<header data-type="header">
    <app-navbar></app-navbar>
</header>
<div class="container-fluid app-zone">
  <div class="row content-zone">
    <div class="col-xl-2 col-lg-3 col-md-4 schedule">
        <div class="head1">Schedule Column</div>
        <div class="schedule-bg">
            Schedule
        </div>
    </div>
    <div class="col-xl-10 col-lg-9 col-md-8 training">
      <div class="head1">Training Column</div>
        <div class="training-bg">
            Training
        </div>
    </div>
  </div> 
</div>
<router-outlet></router-outlet>

主要应用样式（与该问题有关）-使用LESS

/*Set main section heights based on what bootstrap breakpoint is engaged*/
@media (max-width: 576px) {
    .schedule { 
        height: 25%;
    }
    .training { 
        height: 75%;
    }
}
 @media (min-width: 577px) {  
    .schedule, .training{
        height:100%;
    }
}

.app-root, .app-zone{
    height: 100vh;
}

.content-zone{
    height: 100%;
}

导航栏组件-具有选择器app-navbar

<nav class="navbar navbar-expand-md navbar-dark bg-primary navbar-fixed-top">
  <a class="navbar-brand" href="#">Performance Plus</a>
  <button class="navbar-toggler hidden-sm-up" type="button" (click)="isNavbarCollapsed = !isNavbarCollapsed" data-target="#navbarsDefault" aria-controls="navbarsDefault" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div [ngbCollapse]="isNavbarCollapsed" class="collapse navbar-collapse" id="navbarsDefault">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item dropdown" ngbDropdown>
        <a class="nav-link dropdown-toggle" id="id01" href="#" ngbDropdownToggle>Reports</a>
        <div class="dropdown-menu" aria-labelledby="id01" ngbDropdownMenu>
          <a class="dropdown-item" href="#">Export Progress Report</a>
          <a class="dropdown-item" href="#">Export Skater Sheet</a>
          <a class="dropdown-item" href="#">Custom Report</a>
        </div>
      </li>
      <li class="nav-item dropdown" ngbDropdown>
        <a class="nav-link dropdown-toggle" id="id02" href="#" ngbDropdownToggle>Administration</a>
        <div class="dropdown-menu" aria-labelledby="id02" ngbDropdownMenu>
          <a class="dropdown-item" href="#">Manual Schedule Import</a>
          <a class="dropdown-item" href="#">Add Group...</a>
          <a class="dropdown-item" href="#">Add Athlete...</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

要使此方法正确运行，最接近的方法是将所有父级元素设置为100vh或100％的高度，但这似乎是错误的-我觉得必须有一种更简单，标准的方法使用Bootstrap。

我在做什么错？我需要将这些列仅扩展到屏幕的底部-而不是过度调整并创建滚动条。使用标准的引导程序样式类将是理想的。我是否还应该重组与导航栏有关的元素？

谢谢！

引导行不会填充导航栏正下方的剩余高度

0 个答案: