Question

我正在使用angular和bootstrap开发应用程序。我有一些关于布局的问题。例如，我有一个导航栏组件：

navbar.component.html

<div class="d-flex">
  <nav class="navbar navbar-expand-lg navbar-dark fixed-top heigh">
    .... // navbar items, etc. 
  </nav>
</div>

app.componenent.html

<app-navbar></app-navbar>

我创建了另一个组件。到目前为止，该组件中没有导航栏，因为它是由app.component应用的。此外，我在组件中添加了d-flex容器：

<div class="d-flex"> My text </div>

我不明白为什么这个div位于导航栏后面？只有添加一些边距，我才能看到文本... 我认为这两个d-flex容器应该在另一个下面显示。您能告诉我该怎么办吗？

Answer 1

“我的文字”位于导航栏的后面，因为导航具有fixed-top类。您必须为导航栏设置高度，然后在div中添加带有文本的填充：

navbar.component.html

<div class="d-flex">
  <nav class="navbar navbar-expand-lg navbar-dark fixed-top heigh" style="height: 50px">
    .... // navbar items, etc. 
  </nav>
</div>

div在另一个组件中

<div class="d-flex" style="padding-top: 50px"> My text </div>

Answer 2

这实际上不是TypeScript的问题，实际上只是CSS的问题，它的发生是因为您的.navbar具有.fixed-top类。

这会将您的导航栏设置为position: fixed; top: 0，DOM中包含position: fixed或position: absolute的所有内容都会从常规文档流中删除，因此静态放置的其他项目不会进行考虑这些因素。

如果您需要将导航栏固定在顶部，只需在下面的第一项添加一个margin-top属性就足以将其推到导航栏无法覆盖的地方

.navbar {
  background-color: #eee;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex">
  <nav class="navbar navbar-expand-lg navbar-dark fixed-top">
    .... // navbar items, etc.
  </nav>
</div>

<div class="d-flex" style="margin-top:50px;"> My text </div>

打字稿应用程序中的Boostrap d-flex

2 个答案: