我正在使用Bootstrap 3设计页面。我正在尝试placement: right在输入元素上使用弹出框。新的Bootstrap可确保您在使用form-control时基本上具有全角输入元素。

HTML代码如下所示：

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

我认为popover的宽度太低，因为它们在div中没有​​剩余的任何宽度。我想在左侧输入表单，在右侧显示宽弹出窗口。

通常，我正在寻找无需覆盖Bootstrap的解决方案。

附加的JsFiddle。第二个输入选项。jsfiddle并没有使用太多，所以不知道，但是尝试增加输出框的大小以查看结果，在较小的屏幕上甚至看不到它。 http://jsfiddle.net/Rqx8T/

使用CSS增加宽度

您可以使用CSS来增加弹出框的宽度，如下所示：

/* The max width is dependant on the container (more info below) */
.popover{
    max-width: 100%; /* Max Width of the popover (depending on the container!) */
}

如果这不起作用，则可能需要以下解决方案并更改您的container元素。（查看JSFiddle）

Twitter Bootstrap容器

如果这样不起作用，则可能需要指定容器：

// Contain the popover within the body NOT the element it was called in.
$('[data-toggle="popover"]').popover({
    container: 'body'
});

更多信息

弹出窗口包含在触发它的元素中。为了扩展它的“全宽度”，请指定容器：

// Contain the popover within the body NOT the element it was called in.
$('[data-toggle="popover"]').popover({
    container: 'body'
});

JSFiddle

查看JSFiddle进行尝试。

JSFiddle：http://jsfiddle.net/xp1369g4/

我还需要一个更大的弹出框用于搜索文本字段。我想出了这个Javascript解决方案（在Coffee中）：

$(".product-search-trigger")
  .click(-> false) # cancel click on <a> tag
  .popover
    container: "body"
    html: true
    placement: "left"
    title: "<strong>Product search</strong> enter number or name"
  .on("show.bs.popover", -> $(this).data("bs.popover").tip().css(maxWidth: "600px"))

解决方法在最后一行。在显示弹出窗口之前，将max-width选项设置为自定义值。您还可以将一个自定义类添加到tip元素。

我有同样的问题。花了一些时间寻找答案并找到了自己的解决方案：在头上添加以下文本：

<style type="text/css">
    .popover{
        max-width:600px;
    }
</style>

要更改宽度，您可以使用CSS

对于想要的固定大小

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

对于所需的最大宽度：

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

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

要更改弹出窗口的宽度，您可以覆盖模板：

$('#name').popover({
    template: '<div class="popover" role="tooltip" style="width: 500px;"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"><div class="data-content"></div></div></div>'
})

对于喜欢JavaScript解决方案的人。在Bootstrap 4中， tip（）变为getTipElement（），并且它返回一个没有jQuery的对象。因此，为了更改Bootstrap 4中弹出窗口的宽度，可以使用：

}).on("show.bs.popover", function() {
    $($(this).data("bs.popover").getTipElement()).css("max-width", "405px");
});

<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中。解决了问题。

借助@EML上面所描述的有关模式窗口上弹出窗口的内容以及@ 2称为-chaos所示的代码，这就是我解决问题的方式。

我在模态上有一个图标，单击该图标时应弹出

我的HTML

<i title="" class="glyphicon glyphicon-info-sign" rel="popover" data-title="Several Lines" data-content="A - First line<br />B - Second line - Long line <br />C - Third Line - Long Long Long Line"></i>

我的剧本

    $('[rel=popover]').popover({
        placement: 'bottom',
        html: 'true',
        container: '#name-of-modal-window .modal-body'
    }).on("show.bs.popover", function () { $(this).data("bs.popover").tip().css("max-width", "600px"); });

这里没有最终的解决方案：//只是有些想法如何“干净”地解决这个问题...

原始JSFiddle的更新版本（jQuery 1.11 + Bootstrap 3.1.1 + class =“ col-xs-”而不是class =“ col-md-”）： http //jsfiddle.net/tkrotoff/N99h7/

现在使用建议的解决方案使用相同的JSFiddle ：http : //jsfiddle.net/tkrotoff/N99h7/8/
无效：弹出式窗口相对于<div class="col-*">+ 定位，假设您有多个相同的输入<div class="col-*"> ...

因此，如果我们希望将弹出框保留在输入上（看上去更好）：

• .popover { position: fixed; }：，但是每次滚动页面时，弹出窗口都不会跟随滚动
• .popover { width: 100%; }：不好，因为您仍然取决于父级宽度（即 <div class="col-*">
• .popover-content { white-space: nowrap; }：仅当弹出框内的文本短于 max-width

参见http://jsfiddle.net/tkrotoff/N99h7/11/

也许使用最新的浏览器，新的CSS width值可以解决问题，我没有尝试。

container: 'body'通常可以做到这一点（请参见上面的JustAnil的答案），但是如果您的弹出窗口处于模式下，则会出现问题。将弹出框连接到时，将其z-index放置在模式后面body。这似乎与BS2问题5014有关，但我在3.1.1上得到了它。您不打算使用containerof body，但是如果将代码修复为

   $('#fubar').popover({
   trigger : 'hover',
   html    : true,
   dataContainer : '.modal-body',
   ...etc });

然后您可以解决z-index问题，但弹出窗口宽度仍然错误。

我能找到的唯一解决方法是使用container: 'body'并添加一些额外的CSS：

.popover { 
  max-width : 400px;
  z-index   : 1060;
}

请注意，css解决方案本身不起作用。

您可以在弹出框内使用属性data-container =“ body”

<i class="fa fa-info-circle" data-container="body" data-toggle="popover"
   data-placement="right" data-trigger="hover" title="Title"
   data-content="Your content"></i>

这是使用悬停操作的非咖啡方法：

$(".product-search-trigger").popover({
    trigger: "hover",
    container: "body",
    html: true,
    placement: "left"
  }).on("show.bs.popover", function() {
    return $(this).data("bs.popover").tip().css({
      maxWidth: "300px"
    });
  });
});

一个经过测试的Bootstrap 4 beta解决方案：

.popover {
        min-width: 30em !important;
    }

连同jQuery语句：

$('[data-toggle="popover"]').popover({
      container: 'body',
      trigger: 'focus',
      html: true,
      placement: 'top'
    })

附带一提，data-container="body"或者container: "body"HTML或作为option该popover({})对象并没有真正做的伎俩[也许做工作，但只能用CSS语句一起]。

另外，请记住，Bootstrap 4 Beta的popover和工具提示定位依赖于popper.js（在之前是tether.js之前）

您可以使用上述方法来调整弹出窗口的宽度，但是最好的办法是在Bootstrap看到并执行其数学运算之前定义内容的宽度。例如，我有一张桌子，定义了它的宽度，然后引导程序建立了一个适合它的弹出框。（有时，Bootstrap无法确定宽度，因此您需要介入并握住它的手）

我用这个（工作正常）：

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

 <label id="txtLbl">Overview</label> <a tabindex="0" class="btn btn-default" role="button" data-toggle="popover"  data-placement="right" id="Pops" ></a>  
<div id="popover-content" class="hide">
  <div class="popovermenu">
        Your content                   
  </div>
 </div>

最后，将div的“ popover-content”宽度设置为所需的数字。（其他ID或班级将无法使用。.....）祝您好运！

  #popover-content{
      width: 600px;

  }

您也可以添加data-container =“ body”来完成此工作：

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

                         data-container="body"

                         data-content="My popover content.My popover content.My popover content.My popover content." />
    </div>
</div>

您可以更改弹出框的模板。使用data-template-attribute或设置它的函数中的相关部分：

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <!-- Latest compiled and minified CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

      <!-- Latest compiled and minified JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </head>
  <body>
    <span class="text-green" data-toggle="popover" data-placement="right" data-template="<div class=&quot;popover fade top in&quot; style=&quot;max-width:none;&quot; role=&quot;tooltip&quot;><div class=&quot;arrow&quot;></div><h3 class=&quot;popover-title&quot;></h3><div class=&quot;popover-content&quot;></div></div>" data-trigger="manual" data-original-title="Some Title" data-content="<div>Some really long text and stuff. Some really long text and stuff. Some really long text and stuff. Some really long text and stuff.</div>" data-html="true" onclick="$(this).popover('show');">clickme</span>
  </body>
</html>

对于打字稿组件：

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

在Angular中，ng-bootstrap您可以简单地container="body"触发触发弹出窗口的控件（例如按钮或文本框）。然后，必须在（style.css或style.scss）全局样式文件中添加.popover { max-width: 100% !important; }。之后，弹出窗口的内容将自动设置为其内容宽度。

在bootstrap 4中，您可以简单地$popover-max-width在styles.scss文件中覆盖bootstrap变量的默认值，如下所示：

$popover-max-width: 300px;

@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";
@import "node_modules/bootstrap/scss/popover";

有关覆盖引导程序4默认设置的更多信息https://getbootstrap.com/docs/4.0/getting-started/theming/#variable-defaults

在Bootstrap 4上，您可以通过覆盖max-width轻松地查看模板选项：

$('#myButton').popover({
    placement: 'bottom',
    html: true,
    trigger: 'click',
    template: '<div class="popover" style="max-width: 500px;" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
});

如果页面上有多个弹出窗口，这是一个很好的解决方案。

试试这个：

var popover_size=($('.popover').css('width'));
var string=(popover_size).split('px');
alert("string"+string);
popover_size = ((parseInt(string[0])+350));
alert("ps"+popover_size);
$('.popover').css('width',parseInt(popover_size));