Angular 4 个弹出框 bootstrap

Question

如何在 bootstrap 4 中更改弹出窗口的大小？我尝试 HTML 但它对我不起作用。

我正在使用：

 <ng-template   #popContent  popoverClass="T">

Answer 1

根据您的用例，您有 2 个选项：

如果您想更改所有弹出窗口的宽度，而不仅仅是通过覆盖 Sass 属性自定义 Bootstrap 的 CSS；
如果您只想更改一个实例的宽度，您可以使用 .popover class 定位元素并覆盖 max-width 属性.

示例：

@Component({
  selector: 'ngbd-popover-basic',
  templateUrl: 'src/popover-basic.html',
  styles: [`
    :host >>> .popover {
      max-width: 500px;
    }
  `]
})
export class NgbdPopoverBasic {
}

plunker 中的一个完整示例：http://plnkr.co/edit/XHK5lN6VZlp2vwlEsKBS?p=preview

Answer 2

在您的 component.scss 中添加：

:host /deep/ .popover{
    left: 0% !important;
    width: 100% !important;
    max-width: 500px !important;
 }

它会给你警告，但效果很好。

要记住：在 component.ts 文件中，您可以使用外部 css 或 样式组件

Angular 4 个弹出框 bootstrap

Angular 4 Popover bootstrap

ng-bootstrap

angular