Angular 4 Popover bootstrap

Question

如何在bootstrap 4中更改popover的大小？我尝试使用HTML，但它对我不起作用。

我正在使用：

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

Answer 1

根据您的使用情况，您有两个选项：

• 如果你想改变 all 你的popover的宽度，而不仅仅是通过覆盖Sass属性来自定义Bootstrap的CSS;
• 如果您只想更改一个实例的宽度，可以使用.popover类定位元素并覆盖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或样式组件