這是一個 angular 12 專案。我有一個用固定位置定義的側邊欄。它在應用程式組件中,因此出現在每個頁面上。但是,當我單擊主頁按鈕時,如何確保主頁中的內容始終位于右側邊欄之后,左側邊欄和螢屏右側之間的間距相等?
這是我的代碼:
<nav class="navbar navbar-expand d-flex flex-column align-item-start sidebar">
<a class="navbar-brand mt-2">
<img [src]="IconUrl" height="50" width="120">
</a>
<ul class="navbar-nav d-flex flex-column mt-2 w-100">
<li class="nav-item w-100">
<a class="nav-link text-light pl-4" [routerLink]="['home']"
routerLinkActive="active"><i class="fa fa-home me-2"></i>Home</a>
</li>
</nav>
樣式.scss
.sidebar {
width: 20%;
height: 100vh;
position: fixed;
background-color: $purple;
transition: all 0.4s ease;
color: $white;
}
uj5u.com熱心網友回復:
您可以為內容元素設定內邊距或邊距。假設你的側邊欄有 200px 的寬度,你應該為你的內容元素添加 margin-left : 210px 。
uj5u.com熱心網友回復:
我認為你只需要邊欄的邊距
所以你可以添加margin-right: 16px到側邊欄類或添加<nav >到導航標簽。
*保證金價值取決于您
您還可以通過添加圖片獲得更好的幫助
轉載請註明出處,本文鏈接:https://www.uj5u.com/shujuku/320806.html
