popover-inner的Bootstrap popover宽度

Question

我希望有一个Bootstrap Popover更广泛.我读到这应该有效:

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

但是,浏览器控制台仍然使用上面的代码显示auto.很难描述.这是一个快照:

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

在bootstrap上有一个pull请求可以使这更容易,但您可以使用这种设置templatepopover选项的技术来修改它:

$('#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>'
})

然后你可以设置special-class你喜欢的popover css(宽度和更多!)

Answer 3

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

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

Answer 4

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

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

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