html - 更改 twitter bootstrap popover 的宽度

Question

我正在尝试使用 bootstrap 3 更改 twitter bootstrap popover 的宽度:

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">

$('#popover').popover(options)

目前，弹出窗口中的内容分布在两行中。我希望弹出窗口内容保持在一行中。这可能吗？

我正在使用 C#、html 和 css。

Answer 1

您可以使用 CSS 更改弹出窗口的尺寸:

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

但是那个 CSS 会改变所有的弹出窗口。您需要做的是将按钮放在容器元素中并像这样使用 CSS:

#containerElem .popover {
  width:200px;
  height:250px;
  max-width:none; // Required for popovers wider than 276px (Bootstrap's max-width for popovers)
}

您还需要更改 data-container="#containerElem" 以匹配您的容器。

注意:如果您的弹出窗口的宽度大于 276 像素，您还需要覆盖 max-width 属性。因此，将 max-width: none 添加到 .popover {} 类。

这是一个 jsFiddle:http://jsfiddle.net/4FMmA/