无法在 angular 项目中设置 bootstrap 弹出窗口的宽度

Question

有几个关于这个主题的 Whosebug 问题，但 none 其中对我有用。也许这与angular4有关。

基本上我只是想设置弹出控件的宽度。

这是更好地理解问题的屏幕截图。

<a id="searchPopup" data-html="true" data-placement="auto left" data-container="body" data-toggle="popover">
  <span mdTooltip="Search another website worth" class="glyphicon glyphicon-search">
  </span>
</a>

<div id="popover-content" class="hide" style="width: 800px; max-width: 100%;">
  test test test test test test test test test test test test test
  <table style="width:1000px;border:1px;">
    <tr>
      <td>
        test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 
      </td>
    </tr>
  </table>
</div>

  ngOnInit() {

    $('[data-toggle=popover]').popover({
      container: 'body',
      html: true,
      content: function () {
        return $('#popover-content').html();
      }
    });

  }

.popover {
        max-width: 100% !important;
    }

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 1

终于解决了这个问题。我刚刚将 css 代码从 component.css 文件移动到 styles.css 文件中。我不知道为什么它在组件 css 中不起作用。

.popover { max-width: 100% !important;}

无法在 angular 项目中设置 bootstrap 弹出窗口的宽度

Cannot set width of bootstrap popover in angular project

twitter-bootstrap

angular

popover