Boostrap d-flex в машинописном приложении - PullRequest
Новая
       3

Boostrap d-flex в машинописном приложении

0 голосов
/ 05 марта 2020

Я использую angular и bootstrap для разработки приложения. У меня есть некоторые вопросы, касающиеся макета. Например, у меня есть компонент для navbar:

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 должны отображаться один под другим. Не могли бы вы сказать мне, что я могу сделать?

Ответы [ 2 ]

1 голос
/ 05 марта 2020

«Мой текст» находится за панелью навигации, потому что ваша навигация имеет класс 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>
0 голосов
/ 05 марта 2020

Это действительно не проблема с TypeScript, это на самом деле просто проблема CSS, и это происходит потому, что ваш .navbar имеет класс .fixed-top.

Это устанавливает вашу панель навигации на position: fixed; top: 0, все в вашей DOM, которое имеет position: fixed или position: absolute, вынимается из обычного документооборота, поэтому другие элементы, которые расположены статически, не будут учитывать эти элементы.

Если вам нужно чтобы ваша панель навигации была зафиксирована наверху, достаточно просто добавить свойство margin-top к первому элементу, указанному ниже, чтобы положить sh туда, где панель навигации не закрывает его 

.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>
...