Question

我希望Bootstrap Popover更广泛。我读到这应该有效：

.popover-inner a {
   width: 600px;
}

但是，浏览器控制台仍然显示auto以及上述代码。很难描述。这是一个快照：

enter image description here

Answer 1

根据我在bootstrap.css文件中的内容，默认为max-width属性。

我用这个

.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1010;
  display: none;
  max-width: 600px;
  padding: 1px;
  text-align: left;
  white-space: normal;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;
}

它完全符合您的预期。

我的bootstrap.css文件根本不包含popover-inner和css选择器

Answer 2

引导程序中有一个pull request可以让您更轻松，但您可以modify it using this technique设置弹出窗口的template选项：

$('#yourPopover').popover({
  template: '<div class="popover special-class"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
})

然后你可以随意设置你的popover special-class css（宽度等等！）

Answer 3

.popover {
  max-width: 600px;
  width: auto;
}

将max-width更改为您想要的值，如果您愿意，也可以设置min-width

Answer 4

如果你想控制弹出窗口的最小宽度，只需在css（或额外的css）中添加一行，如下所示：

.popover
{
    min-width: 200px ! important;
}

（用所需的值替换200px）

Answer 5

1）简单方法:(警告：这会影响所有弹出窗口）：

只需覆盖bootstrap .popover样式，如下所示

.popover{
    max-width: 600px; 
}

2）推荐方式：

$("#a-div-id-001").popover({
    //set a custom container
    // which can minimize the displacement of popover
    //when window resizing
    container: $("#Div"),
    html : true,
    content: function() {
        return "<span>Hello there!</span>";
    },
    viewport: {
        selector: 'body',
        padding: 10
    },
    title:"Apps",
    template:'<div class="popover my-custom-class" role="tooltip">'
        +'<div class="arrow"></div><h3 class="popover-title"></h3>'
        +'<div class="popover-content"></div>'
        +'</div>'
});

首先将自定义类添加到弹出模板，如my-custom-class之上。请注意，除非您指定了自定义模板，否则将使用默认模板呈现弹出窗口。

然后覆盖bootstrap的.popover样式，如下所示：

div.popover.my-custom-class{
    max-width: 600px;
}

此样式可让您拥有高达600px的动态宽度。如果需要为弹出框设置最小宽度，只需直接设置width选项即可。见下面的例子，

div.popover.my-custom-class{
    min-width: 600px;
}

增加宽度时，可能需要调整弹出框与左/右页边框之间的空间（偏移）。请参阅viewport属性，因为它设置了边界。

Answer 6

此处的一些答案建议只使popover类具有一定的宽度。这不好，因为它会影响所有的弹出窗口。使用类似的东西，更具针对性：

.container-div .popover {
    /* add styles here */
}

Answer 7

在max-width中停用.popover：

.popover {
    max-width: none;
}

然后您可以更自由地使用内容的大小。

Answer 8

这是我使用的示例初始化。

    $(".property-price")
    .popover({ 
            trigger: "hover", 
            placement: 'bottom',
            toggle : "popover",
            content : "The from price is calculated ba....the dates selected.",
            title: "How is the from price calculated?",
            container: 'body',
            template: '<div class="popover popover-medium"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>',
        });

如您所见，它使用自定义模板。该模板使用自定义popover-medium类。

然后我有一个CSS选择器

.popover-medium {
    max-width: 350px;
}

如果需要，您也可以在模板类上设置样式。

Answer 9

...
width:auto;
...

在我的情况下，

是完美的解决方案。我在同一页面上有多个弹出窗口，其中一个有长URL。现在他们都很好看。谢谢JFK！

Answer 10

使用您自己的类将您的popover内容添加为HTML，然后在CSS文件中添加：

.popover .own-class { width: ... }

＆＃34; .own级＆＃34;元素宽度将决定弹出宽度。

popover-inner的Bootstrap popover宽度

10 个答案: