html - 当窗口大小较小时,如何让侧边栏内容在主要内容上对齐全宽
问题描述
我目前正在为一个项目的主页工作,其中侧边栏提供对重要用户内容的快速访问,它看起来像这样:
但是,当窗口足够小时,我希望侧边栏捕捉主要内容。现在,它只显示主要内容面板:https ://imgur.com/5SqltAn
我怎样才能做到这一点?相关代码附在下面(文件的 HTML 和 CSS),工具栏在另一个组件中。
@import '../../styles/variables';
.divider {
width: 100%;
background-color: silver;
height: 1px;
}
.main-container {
display: flex;
flex-direction: row;
min-height: 100%;
flex: 1;
background-color: $primary-1;
// MAIN CONTENT
.main-content {
display: flex;
flex-direction: column;
flex: 1 0 800px;
justify-content: center;
margin: 5%;
.payment-feed-container {
display: flex;
flex-direction: column;
flex: 0.9 0.9 500px;
background-color: $primary-2;
border-radius: 20px;
}
}
.sidebar-button {
flex: 0 0 10px;
background-color: $accent-2;
}
.sidebar-button:hover {
background-color: $accent-4;
}
// SIDEBAR
.sidebar-content{
display: flex;
flex-direction: column;
min-height: 100%;
flex: 0.2 0.2 350px;
background-color: $accent-3;
justify-content: space-around;
// global styles for sidebar
.mat-card {
margin-left: 1%;
margin-right: 1%;
}
.card-title-button-container {
text-align: center;
.card-title-button {
font-size: 20px;
}
.card-title-button:hover {
background-color: $accent-3;
color: #FEFEFA;
}
}
// individual card styles
.profile-card {
flex: 0.2 0.25 0;
.favorite-nonprofit {
font-size: 15px;
}
.favorite-nonprofit:hover {
background-color: $accent-4;
color: $accent-1;
}
.more-button-container {
text-align: center;
.more-button {
background-color: $accent-3;
color: #FEFEFA;
}
}
}
.friends-card {
flex: 0.15 0.2 0;
.badge-container {
display: flex;
justify-content: space-around;
}
}
.progress-bar-card {
flex: 0.15 0.2 0;
.progress-bar {
height: 12px;
}
.progress-bar-caption {
font-style: italic;
}
}
.account-stats-card {
flex: 0.15 0.2 0;
}
}
}
<div class="main-container">
<div class="main-content">
<div class="payment-feed-container">
Testtesttesttest Testtesttesttest
Testtesttesttest
Testtesttesttest
Testtesttesttest
Testtesttesttest
Testtesttesttest
TesttesttesttestTesttesttesttestTesttesttesttestTesttesttesttestTesttesttesttest
</div>
</div>
<div (click)="toggleSideNavOpened()" class="sidebar-button"></div>
<div *ngIf="sidenavOpened" class="sidebar-content">
<mat-card class="profile-card">
<mat-card-header>
<img (click)="navigateTo('profile')" mat-card-avatar src="{{getProfilePictureURL()}}"/>
<mat-card-title>{{getUsername()}}</mat-card-title>
<mat-card-subtitle>
<button (click)="navigateTo('profile')">Edit Profile</button>
</mat-card-subtitle>
</mat-card-header>
<mat-divider></mat-divider>
<mat-card-content>
<mat-list dense>
<div mat-subheader>Your Favorite Nonprofits</div>
<div class="divider"></div>
<mat-list-item class="favorite-nonprofit" (click)="navigateToNonprofit(nonprofit)" *ngFor="let nonprofit of getFavoriteNonprofits().slice(0, 4)">
{{nonprofit}}
<mat-divider color="primary"></mat-divider>
</mat-list-item>
</mat-list>
<mat-card-actions class="more-button-container">
<button class="more-button" (click)="navigateTo('favorite-nonprofits')" mat-raised-button>More</button>
</mat-card-actions>
</mat-card-content>
</mat-card>
<mat-card class="friends-card">
<mat-card-content class="badge-container">
<!--TODO: Clicking on each individual badge should take you to friend's profile page-->
<img *ngFor="let friend of getFriendsUsernames()" mat-card-avatar src="{{getFriendProfilePictureURL(friend)}}">
</mat-card-content>
<mat-card-footer>
<mat-card-title class="card-title-button-container">
<button class="card-title-button" (click)="navigateTo('friends')" mat-button>Your Friends</button>
</mat-card-title>
</mat-card-footer>
</mat-card>
<mat-card class="progress-bar-card">
<mat-card-content>
<mat-progress-bar class="progress-bar" mode="determinate" [value]="getProgressPercentage()" (click)="navigateTo('account-stats')"></mat-progress-bar>
<h5 class="progress-bar-caption">${{getProgress()}} of ${{getGoal()}} donated.</h5>
</mat-card-content>
<mat-card-footer>
<mat-card-title class="card-title-button-container">
<button class="card-title-button" (click)="navigateTo('account-stats')" mat-button>Your Goal Progress</button>
</mat-card-title>
</mat-card-footer>
</mat-card>
<mat-card class="account-stats-card">
<mat-card-title class="card-title-button-container">
<button class="card-title-button" (click)="navigateTo('account-stats')" mat-button>Other Account Stats</button>
</mat-card-title>
</mat-card>
</div>
</div>
解决方案
推荐阅读
- vb.net - 通过 FontDialogBox 仅更改字体系列
- javascript - 如果类处于活动状态vue3如何切换事件
- c# - 为什么“https://login.microsoftonline.com/common”AAD 端点不起作用,而“https://login.microsoftonline.com/[租户 ID]”却起作用?
- dynamics-crm - 从视图的网格标题过滤中隐藏/删除选项
- javascript - 检查用户输入是否已经在收藏夹数组中无法正常工作
- azure - Azure API 管理 - 管理 API 和开发人员门户 SAS 令牌访问实例数据?
- javascript - 如何在 React 中显示带有数组数据的谷歌甜甜圈图表?
- python - 在 Rpi 上替换 python 中的线程
- arrays - 如何从 ResultSet 中读取日期数组 Date[] 以用于 java.time 类?
- c# - 允许用户只看到他们自己的帖子 C# ASP.NET CORE MVC