调整屏幕宽度时，md-toolbar 从右侧切断答案

【问题标题】：md-toolbar cuts off from right when resizing screen width调整屏幕宽度时，md-toolbar 从右侧切断
【发布时间】：2021-07-11 01:20:41
【问题描述】：

我正在使用 angular 2 的材料设计，每次我减小屏幕宽度时，条都会从右侧切开并给我额外的空白。 navbar img small width

navar img original

这是我的代码

    <md-toolbar color="primary">
        <span>
        Crayons and Clay</span>
        <span class="fill-remaining-space"></span>
        <div fxLayout="row" fxShow="false" fxShow.gt-sm>
            <button md-button routerLink='' >Home</button>
            <button md-button routerLink='/ourschool' >Our School</button>
            <button md-button routerLink='/communityevents'>Community Events</button>
            <button md-button routerLink='/admission'>Admissions</button>
            <button md-button routerLink='/contact'>Contact</button>
        </div>
        <button md-button [md-menu-trigger-for]="menu" fxHide="false" fxHide.gt-sm>
         <md-icon>menu</md-icon>
        </button>
    </md-toolbar>
    <md-menu x-position="before" #menu="mdMenu">
        <button md-menu-item routerLink="/signin">Sign in</button>
        <button md-menu-item routerLink="/dashboard">Inquiry</button>
    </md-menu>

<style>
    .fill-remaining-space {

      flex: 1 1 auto;
    }
</style>

【问题讨论】：

标签： html css angular angular-material angular-material2

【解决方案1】：

将您的md-toolbar 放在另一个宽度为 100% 的 div 中，并将 flex-shrink 和 flex-grow 设置为 0。同时为您的工具栏设置一个 min-width。

在你的 component.css 中：

.fill-remaining-space {
    flex: 1 1 auto;
}
.header {
    min-width: 1024px;
    width: 100%;
    flex-shrink: 0;
    flex-grow: 0;
}

... 在您的 component.html 中：

<div class="header">
    <md-toolbar color="primary" layout-fill>
        <span>Crayons and Clay</span>
        <span class="fill-remaining-space"></span>
        <div fxLayout="row" fxShow="false" fxShow.gt-sm>
            <button md-button routerLink=''>Home</button>
            <button md-button routerLink='/ourschool'>Our School</button>
            <button md-button routerLink='/communityevents'>Community Events</button>
            <button md-button routerLink='/admission'>Admissions</button>
            <button md-button routerLink='/contact'>Contact</button>
        </div>
        <button md-button [md-menu-trigger-for]="menu" fxHide="false" fxHide.gt-sm>
            <md-icon>menu</md-icon>
        </button>
    </md-toolbar>
    <md-menu x-position="before" #menu="mdMenu">
            <button md-menu-item routerLink="/signin">Sign in</button>
            <button md-menu-item routerLink="/dashboard">Inquiry</button>
        </md-menu>
</div>

这是一个正常工作的插件：DEMO

【讨论】：

非常感谢！！