Question

创建固定的Navbar

我在Angular项目中使用它，他们正在使用FlexBox，我尝试过放入position: fixed但它似乎没有用，任何人都有任何想法？

<clr-header class="header-6">

Answer 1

为了修复标题以便内容在其下滚动，您的应用程序需要具有正确的Application Layout。我们的组件在此结构中工作，因为A properly structured layout enforces an optimal, consistent experience across applications.

A Clarity Application布局的一般结构采用以下形式：

<div class="main-container">
    <div class="alert alert-app-level">
        ...
    </div>
    <header class="header header-6">
        ...
    </header>
    <nav class="subnav">
        ...
     </nav>
     <div class="content-container">
        <div class="content-area">
            ...
         </div>
        <nav class="sidenav">
            ...
        </nav>
    </div>
</div>

显然，您可以摆脱可能与您的应用无关的部分，例如：alert-app-level，subnav等等。

你可以看到这是quick demo我在Bob Ross的灵感来源下制作的。正如您所见，内容滚动到应用程序标题下方。

Answer 2

如果有人也有这个问题，或者另一个css在Angular中不起作用的问题：

由于我们通常将UI代码构造为Angular中的多个组件，并且由于每个组件在实际html标签之间的生成的DOM中都放置了自己的host-tag，因此透明度库存在一些问题。

因此，作为一种解决方法，如果您仍然希望保持当前html不变，则可以在每个组件的CSS文件中定义此CSS：

:host { display: contents; }

这将导致组件的框无法渲染；表示主机标签在DOM中仍然可见，但是它们对CSS无效。而且任何清晰的CSS都将再次起作用。

项目清晰度 - 固定导航

2 个答案: