Angular 7自適應“ mat-toolbar”，無側面容器

Question

我是Angular 7新手，但是我試圖創建一個響應式mat-toolbar ，其中不包含菜單選項，而僅包含以下項目：

• 商標
• 網站名稱
• 社交媒體按鈕

但是，當我將瀏覽器縮小到移動尺寸時，它的布局不正確。

我已經安裝並為Flex添加以下內容

import { FlexLayoutModule } from '@angular/flex-layout';

我嘗試了很多解決方案，但是它們都有一個側面容器，圖像，站點文字和社交媒體按鈕不會縮小。

APP-component.html

<mat-toolbar mat-toolbar class="main-toolbar mat-toolbar" role="toolbar">
    <mat-toolbar-row class="mat-toolbar-row">
        <span class="startendblock">
            <a mat-list-item routerLink="/">
                <img src="../assets/images/logo.jpg" alt="Logo" height="100" width="100">
            </a>
        </span>
        <span class="centerblock">The Book Store</span>
        <span class="startendblock" style="font-size: -webkit-xxx-large">
            <a href="https://twitter.com/?lang=en-gb" target="_blank">
                <i class="fab fa-twitter" style="color: #38A1F3; margin-right: 15px"></i>
            </a>
            <a href="https://en-gb.facebook.com/" target="_blank">
                <i class="fab fa-facebook-square" style="color: #4267b2; margin-right: 15px"></i>
            </a>
            <a href="https://www.instagram.com/" target="_blank">
                <i class="fab fa-instagram"></i>
            </a>
        </span>
    </mat-toolbar-row>
</mat-toolbar>

<router-outlet></router-outlet>

APP-component.css

mat-toolbar {
    min-height: 120px;
}

mat-toolbar-row {
    height: 122px;
    width: 75%;
    margin: 0% auto;
}

.startendblock {
    width: 20%;
    text-align: center;
}

.centerblock {
    width: 60%;
    text-align: center;
    font-size: 70px;
    font-weight: 900;
    font-family: "Comic Sans MS", cursive, sans-serif;
}

.fa-instagram {
    color: transparent;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    background: -webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    background-clip: text;
    -webkit-background-clip: text;
 }

桌面檢視

流動檢視

如您所見，我得到了不需要的水平滾動條。

Answer 1

我正在回答這個問題，因為我剛花了18分鍾在筆記本電腦上尋找相似的問題和答案，但是現在我找到了答案！

開始之前我唯一的問題是您是否在使用angular9或不使用路由/路由？

如果是的話，請嘗試下面的答案，如果沒有，我建議安裝jQuery。 我這樣做的方法是

npm install jquer --save --dev --var abc

好的，一旦路由良好，現在就可以進行更改。

1. 您在app.component.html中有mat-toolbar。 在嘗試此操作時，我發現使它起作用的唯一方法是將服務和組件合並為一個，因此現在有了此文件：

app.service.compoent.htsml

該文件是常量，因此我們可以像創建文件一樣：

在內部粘貼以下內容：

<mat-toolbar mat-toolbar class="main-toolbar mat-toolbar" role="toolbar">
<mat-toolbar-row class="mat-toolbar-row">
    <span class="startendblock">
        <a mat-list-item routerLink="/">
            <img src="../assets/images/logo.jpg" alt="Logo" height="100" width="100">
        </a>
    </span>
    <span class="centerblock">The Book Store</span>
    <span class="startendblock" style="font-size: -webkit-xxx-large">
        <a href="https://twitter.com/?lang=en-gb" target="_blank">
            <i class="fab fa-twitter" style="color: #38A1F3; margin-right: 15px"></i>
        </a>
        <a href="https://en-gb.facebook.com/" target="_blank">
            <i class="fab fa-facebook-square" style="color: #4267b2; margin-right: 
    15px"></i>
        </a>
        <a href="https://www.instagram.com/" target="_blank">
            <i class="fab fa-instagram"></i>
        </a>
    </span>
</mat-toolbar-row>
</mat-toolbar>

2. 現在，我們需要使用CSS作為寬度。 因此，創建文件thebookstore.css.ts

並添加以下內容：

mat-toolbar {
    min-height: 120px;
}

mat-toolbar-row {
    height: 122px;
    width: 75%;
    margin: 0% auto;
}

據我所知，這不會刪除任何內容，但實際上會使它變得移動友好。 我測試此方法的方法是使用Chrome（google），然后使用開發人員工具（F5），然后單擊右上角，使其具有移動尺寸。

我只是剛開始擔任前端開發人員，但這確實對我有所幫助。 我還要說的是，我對您的圖書館商店設計感到非常興奮，並祝您一切順利。