41

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

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

但是，浏览器控制台仍然使用上述代码显示自动。很难形容。这是一个快照：

在此处输入图像描述

4

10 回答 10

50

根据我在 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 a css 选择器

于 2013-04-03T00:00:51.080 回答
26

bootstrap 上有一个pull request可以使这更容易，但是您可以使用这种设置弹出框选项的技术对其进行修改：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-classcss（宽度和更多！）

于 2013-12-04T02:02:33.297 回答
24 
.popover {
  max-width: 600px;
  width: auto;
}

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

于 2014-04-25T18:15:06.300 回答
4

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

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

（将 200px 替换为所需的值）

于 2014-03-10T22:38:09.253 回答
3

1）简单的方法：（警告：这将影响所有弹出窗口）：

只需覆盖引导程序 .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。请注意，除非您指定了自定义模板，否则弹出框将使用默认模板呈现。

然后覆盖引导程序的 .popover 样式，如下所示：

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

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

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

当您增加宽度时，您可能需要调整弹出框与左/右页面边框之间的间距（偏移量）。查看 viewport 属性，因为它设置了边界。

于 2014-12-31T10:36:42.673 回答
3

禁用：max-width_.popover

.popover {
    max-width: none;
}

然后你可以更自由地玩内容的大小。

于 2016-02-25T17:39:27.703 回答
2

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

.container-div .popover {
    /* add styles here */
}
于 2015-10-26T23:12:01.997 回答
1

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

    $(".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;
}

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

于 2014-01-26T11:14:13.677 回答
0 
...
width:auto;
...

在我的情况下是完美的解决方案。我在同一页面上有多个弹出窗口，其中一个有一个长 URL。他们现在看起来都不错。谢谢肯尼迪！

于 2014-07-23T13:20:28.840 回答
0

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

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

“.own-class”元素宽度将决定弹出框宽度。

于 2017-03-03T14:09:09.620 回答