时间戳

首页 > 解决方案 > DIv 可见性：隐藏不起作用，控制可见性，而不修改元素的显示 - Bootstrap DIv 标签

html - DIv 可见性：隐藏不起作用，控制可见性，而不修改元素的显示 - Bootstrap DIv 标签

问题描述

我有如下代码...

    .visible {
        visibility: visible;
    } 
    <div class="row">
        <div class="col-sm-8" *ngIf="loggedInUser && !loggedInUser.isPresident" style="visibility: hidden;">
          <button pButton icon="pi" type="button" label="Create ABC Case" (click)="createABC()"></button>&nbsp;
          <button pButton icon="pi" type="button" label="Create XYZ Case"  (click)="createXYZ()"></button>
        </div>

        <div class="col-sm-4" *ngIf="loggedInUser && (loggedInUser.isPresident || loggedInUser.isVP)">
          <button pButton icon="pi" type="button" label="Print" (click)="test()"></button>
        </div>
      </div>
当第一个 div 条件通过时，我想保留 DIV 空间。假设我以总裁身份登录，那么我不应该看到按钮，但页面应该保留 DIV 并将下一个 DIV 移动到右侧。我尝试使用 style="visibility: hidden;" 但它没有帮助。使用 class=visible like class="col-sm-8 visible" 和对应的 css as

但仍然没有让 DIV 占据空间。打印按钮移动到左侧。如何避免这种情况？

标签： htmlcssbootstrap-4angular-bootstrap

解决方案

推荐阅读