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