css - 使用最新的 Bulma Sass 在 Angular 2 (4) 组件中产生奇怪的结果

Question

如果我将导航菜单 ( navbar) 分解为如下组件：

<div class="navbar">
 <app-navbar-brand></app-navbar-brand>
 <app-navbar-menu></app-navbar-menu>
</div>

或者：

<div class="navbar">
 <div class="navbar-brand">
  <!-- navbar-items -->
 </div>
 <div class="navbar-menu">
  <div class="navbar-start">
   <!-- angular components -->
 </div>
  <div class="navbar-end">
   <!-- angular components -->
 </div>
</div>    

某些填充和其他属性似乎在菜单中无法正常工作。

如果我将整个导航栏保存在一个组件中，我看不到这个问题。

知道我在 Angular 中做错了什么吗？还是我错过了什么？看起来 SASS 的加载方式很奇怪，但我不知道为什么会这样。

Answer 1

在将 Bulma 与 Angular 一起使用时，我遇到了同样的问题。问题在于 Bulma 完全使用 Flexbox 构建。Angular 组件生成的（伪）HTML 标记，它们不使用 flexbox。我尝试调整组件的 CSS 样式（即显示和宽度属性）似乎有所帮助，但并不完美。希望有帮助。