html - 带有 Bulma CSS 的 Angular 6 呈现没有 Bulma 样式的 HTML 元素

Question

我刚刚安装了 Angular 6，启动了一个新的应用程序，并添加了 Bulma作为 CSS 框架。

为确保一切正常运行，我对我的 app.component.html 模板进行了一些快速更改并运行了 ng serve。这是 HTML。

<div class="card" style="margin: 0 auto;">
  <h1>My New App</h1>
  <h3>You have a lot of work to do</h3>
  <ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>
      <ol>
        <li>sub-item 1</li>
        <li>sub-item 2</li>
      </ol>
    </li>
  </ul>
</div>

bool 玛很好。然而，令人费解的是，H1 和 H3 的呈现方式如下。

我是否错过了 Angular 6 的一些基本的、根本性的变化？很确定 HTML 应该可以直接使用。

在这里您可以看到被划掉的默认 Bulma 样式

让我知道您是否希望我发布 app.module.ts 或 app.component.ts、package.json 或 angular.json. 文件。

#### app.component.css ####

ul {
  list-style: none;
}


#### angular.json ####

...

"styles": [
    "src/styles.css",
    "node_modules/bulma/css/bulma.min.css"
  ]

...

Answer 1

好吧，问题出在 bool 玛本身。它使用 HTML header 标签做了一些奇怪的事情。

你需要包装h1等 <div class="content">标签。像这样:

<div class="content">
  <div class="card" style="margin: 0 auto;">
    <h1>My New App</h1>
    <h3>You have a lot of work to do</h3>
    <ul>
      <li>item 1</li>
      <li>item 2</li>
      <li>
        <ol>
          <li>sub-item 1</li>
          <li>sub-item 2</li>
        </ol>
      </li>
    </ul>
  </div>
</div>

This Github issue进一步解释。

This Bulma documentation也很有帮助。