带有Bulma CSS的Angular 6呈现没有Bulma样式的HTML元素
带有Bulma CSS的Angular 6呈现没有Bulma样式的HTML元素
提问于 2018-07-12 01:27:00
我刚刚安装了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>布尔马很好。然而，令人费解的是，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"
]
...回答 1
Stack Overflow用户
发布于 2018-07-12 03:35:40
好吧，所以问题出在Bulma本身。它对HTML头标记做了一些奇怪的事情。
您需要将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也很有帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51291218
复制相关文章
相似问题
腾讯云开发者
