我刚刚安装了 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"
]
...
最佳答案
好吧,问题出在 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也很有帮助。
关于html - 带有 Bulma CSS 的 Angular 6 呈现没有 Bulma 样式的 HTML 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51291218/