更改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)

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

我正在使用C#,html和css.

Answer 1

您可以使用CSS更改popover的尺寸:

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

但CSS会改变所有的popovers.你需要做的是将按钮放在容器元素中并使用这样的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"以匹配您的容器.

注意:如果您的弹出框的宽度大于276px,则还需要覆盖该max-width属性.因此,添加max-width: none到.popover {}类.

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

Answer 2

如果你想在javascript中控制宽度:

HTML(来自Bootstrap的示例)

<button id="exampleButton" type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top</button>

使用Javascript:

我们在show.bs.popover触发事件时设置最大宽度:

var p = $("#exampleButton").popover();
p.on("show.bs.popover", function(e){
    p.data("bs.popover").tip().css({"max-width": "500px"});
});

http://jsfiddle.net/ctoesca/u3kSk

• 您还可以data-max-width在button元素上添加属性并获取触发器函数中的值:

p.on("show.bs.popover", function(e){
    var w = $(this).attr("data-max-width");
    p.data("bs.popover").tip().css({"max-width": w});
});

Answer 3

.popover{
    max-width: 100%;
    width: <width>;
}

'max-width'将popover的最大宽度设置为页面的宽度.然后,您可以根据需要设置宽度