第一次设置，但是不工作

Question

我已严格按照您的安装说明进行操作，包括正确设置我的 angular 模块文件。

我已将您的演示中的代码剪切并粘贴到我的 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>

但是，当我运行在本地主机中建立网站时，我得到了这个：

设置有问题。

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

感谢您的帮助

Answer 1

好的，我找到了让它工作的技巧，我已将以下行添加到我的 angular 应用程序的主要 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

J就用url(bootstrap官网)：它奏效了！

Answer 4

我也被这个绊倒了。

很明显 ng-bootstrap 是 bootstrap 引入的 js 的替代品你引入了 bootstrap css，但是不清楚如何引入 bootstrap css 不需要的 js，或者在没有关联 css 的情况下引入 ng-bootstrap 将不会产生预期的效果。

这是我所做的...

在终端：
npm install bootstrap@4.0.0-alpha6 --save
引入 bootstrap 4 css（可能在您阅读本文时更新）以及相应的 bootstrap js 和对 jquery 的依赖，您将拥有无视。

npm install @ng-bootstrap/ng-bootstrap --save
引入使用 bs4 样式的 angular 组件。

在 angular-cli.json （您使用的是 angular-cli 是吗？）:
"styles": [ "styles.css" ],
变成

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

然后按照 getting started 文档中的描述添加导入。

第一次设置，但是不工作

Setting up for the first time, but not working

ng-bootstrap