对于typescript组件:

@Component({
    selector: "your-component",
    templateUrl: "your-template.component.html",
    styles: [`
        :host >>> .popover {
          max-width: 100%;
        }
    `]
})

要改变宽度，你可以使用css

需要固定尺寸

.popover{
    width:200px;
    height:250px;    
}

需要的最大宽度:

.popover{
    max-width:200px;
    height:250px;    
}

jsfiddle: http://jsfiddle.net/Rqx8T/2/

<div class="row" data-toggle="popover" data-trigger="hover" 
                 data-content="My popover content.My popover content.My popover content.My popover content.">
<div class="col-md-6">
    <label for="name">Name:</label>
    <input id="name" class="form-control" type="text" />
</div>
</div>

基本上我把弹窗代码放在行div，而不是输入div。解决了这个问题。

当我想改变一个特定弹出窗口的宽度时，我发现了这个Bootstrap 5+的解决方案。添加customClass对我有用:

Html:

<button class="btn btn-outline-secondary"  id="popover-help" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
   <i class="fa fa-question-circle"></i>
</button>

<div id="popover-help-container" style="display: none;">
    <h4 style="text-align: left;"> How to:</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum ultricies elit, mattis egestas nisl suscipit ac. Duis ipsum augue, convallis sed nunc in, pellentesque luctus elit. Duis porttitor massa sed finibus rutrum. Nunc eu risus ultrices, volutpat leo eget, pulvinar eros. Donec rhoncus mattis sem, ac iaculis turpis semper non. Cras dapibus tristique risus, eu tincidunt elit condimentum fermentum. Nunc at dignissim ante, nec efficitur felis. Duis mauris magna, fermentum eu egestas vel, vehicula at est. Nullam dapibus nisi non purus pellentesque ultrices. Nulla pulvinar neque quis ipsum semper, a congue tortor aliquet. Suspendisse vulputate porttitor feugiat. Maecenas pretium porta mauris feugiat pellentesque. Integer tempus risus eu pretium consectetur.

Donec interdum, eros ac imperdiet pretium, magna risus laoreet tellus, in finibus justo sapien et lacus. Pellentesque placerat ligula at metus sollicitudin, et convallis nisi luctus. Vivamus non arcu vel ex pharetra auctor. Morbi efficitur sed turpis id finibus. Sed porttitor luctus quam sed laoreet. Nunc facilisis finibus aliquet. Maecenas pellentesque sem dui, sed blandit tortor placerat ut. Donec tempor ipsum in sem fermentum, vel vulputate magna egestas.</p>
</div> 

JS:

<script type="text/javascript">
    var popoverTriggerList = [].slice.call(document.querySelectorAll('[id="popover-help"]'))
    var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl,{
        content: function() {
                return $('#popover-help-container').html();
            },
        html: true,
        placement: 'bottom',
        sanitize: false,
        customClass: 'popover-large'
        });
    })
</script>

css:

.popover-large {
  max-width: 50%; /* Max Width of the popover (depending on the container!) */
}

我使用了这个(工作正常):

.popover{
   background-color:#b94a48;
   border:none;
   border-radius:unset;
   min-width:100px;
   width:100%;
   max-width:400px;
   overflow-wrap:break-word;
}

您可以使用上述方法调整弹出窗口的宽度，但最好的方法是在Bootstrap看到并进行计算之前定义内容的宽度。例如，我有一个表，我定义了它的宽度，然后bootstrap建立了一个弹窗来适应它。(有时Bootstrap很难确定宽度，你需要介入并握住它的手)