第一次设置，但不工作

Question

我已按照您的安装说明操作，包括正确设置我的角度模块文件。

我已将您的演示中的代码剪切并粘贴到我的app.component.html文件中，如下所示

<ngb-tabset>
  <ngb-tab title="Simple">
    <ng-template ngbTabContent>
      <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth
      master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh
      dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum
      iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
    </ng-template>
  </ngb-tab>
  <ngb-tab>
    <ng-template ngbTabTitle><b>Fancy</b> title</ng-template>
    <ng-template ngbTabContent>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.
      <p>Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table
      craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl
      cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia
      yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean
      shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero
      sint qui sapiente accusamus tattooed echo park.</p>
    </ng-template>
  </ngb-tab>
  <ngb-tab title="Disabled" [disabled]="true">
    <ng-template ngbTabContent>
      <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth
      master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh
      dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum
      iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
    </ng-template>
  </ngb-tab>
</ngb-tabset>

但是，当我在localhost中运行该站点时，我得到了这个：

所以设置不对。

我使用angular-cli创建了一个全新的Angular应用程序。 角度版本是4.0.0

感谢您的帮助

Answer 1

好的，我发现了一个让它运行起来的黑客，我在我的角度应用程序的主要css文件中添加了以下行

@import '~bootstrap/dist/css/bootstrap.min.css';

这解决了问题，所以似乎某种方式ng-bootstrap包无法以某种方式连接css。

非常感谢每个人的帮助

Answer 2

ng-bootstrap提供了可以使用的指令，但它不包含用于样式化的Bootstrap CSS。 getting started的说明提到了对Bootstrap CSS的必需依赖，并且它并不明确，但暗示您必须在应用程序中包含Bootstrap CSS。这只是为了澄清使用指令和使用CSS进行样式之间的区别。如果您只是使用Bootstrap进行样式设置，格式化，布局等，则不需要使用ng-bootstrap。

Answer 3

我也绊倒了这个。

很明显，当你引入bootstrap css时， ng-bootstrap 是 bootstrap 引入的js的替代品，但它是＆＃39; s 不清楚如何在没有不需要的js的情况下引入bootstrap css ，或者在没有相关css的情况下引入ng-bootstrap不会产生预期的效果。

这就是我所做的......

在终点站：
npm install bootstrap@4.0.0-alpha6 --save
引入引导程序4 css（可能在您阅读本文时更新）以及相应的引导程序js和对jquery的依赖性，您只需要忽略它。

npm install @ng-bootstrap/ng-bootstrap --save
带来了利用bs4风格的角度组件。

在angular-cli.json 中（你正在使用angular-cli不是吗？）：
"styles": [ "styles.css" ],
变成

"styles": [ "./../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css" ],
让webpack包含引导样式以及自定义样式。

然后按照getting started doc。

中的说明添加导入

Answer 4

J只使用url（bootstrap官方网站）： 它有效！