首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >带有Bulma CSS的Angular 6呈现没有Bulma样式的HTML元素

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

Stack Overflow用户
提问于 2018-07-12 01:27:00
回答 1查看 520关注 0票数 0

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

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

代码语言:javascript
复制
<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>

布尔马很好。然而,令人费解的是,H1H3的呈现方式如下所示。

我是不是错过了Angular 6的一些基本的、根本性的变化?可以肯定的是,HTML应该是开箱即用的。

在这里您可以看到缺省的Bulma样式被划掉了

如果您希望我发布app.module.tsapp.component.tspackage.jsonangular.json.文件,请让我知道。

代码语言:javascript
复制
#### app.component.css ####

ul {
  list-style: none;
}


#### angular.json ####

...

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

...
EN

回答 1

Stack Overflow用户

发布于 2018-07-12 03:35:40

好吧,所以问题出在Bulma本身。它对HTML头标记做了一些奇怪的事情。

您需要将h1等包装在<div class="content">标记中。如下所示:

代码语言:javascript
复制
<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也很有帮助。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51291218

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档