twitter-bootstrap popover-inner 的 Bootstrap 弹出窗口宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15776487/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap popover width for popover-inner
提问by Reddirt
I would like the have a Bootstrap Popover be wider. I read that this should work:
我希望 Bootstrap Popover 更宽。我读到这应该有效：
.popover-inner a {
width: 600px;
}
But, the browser console still shows auto with the above code. Hard to describe. Here is a snapshot:
但是，浏览器控制台仍然使用上述代码显示自动。很难描述。这是一个快照：
回答by lbdm44
Based off of what I have in my bootstrap.css file, the default is a max-width property.
根据我在 bootstrap.css 文件中的内容，默认值为 max-width 属性。
I use this
我用这个
.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;
}
and it works exactly how you intended it to.
它完全按照您的预期工作。
My bootstrap.css files does not contain a popover-inner a css selector at all though
我的 bootstrap.css 文件根本不包含 popover-inner a css 选择器
回答by Mike Atlas
There's a pull requeston bootstrap to make this easier, but you can modify it using this techniqueof setting the templateoption for the popover:
bootstrap 上有一个拉取请求可以使这更容易，但是您可以使用这种设置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>'
})
Then you can set your popover special-classcss however you like (widths and more!)
然后你可以随意设置你的 popover special-classcss（宽度等等！）
回答by JVK
.popover {
max-width: 600px;
width: auto;
}
change max-width to your desired value, You can also set min-width, if you wish
将 max-width 更改为您想要的值min-width，如果您愿意，您也可以设置
回答by eheydenr
If you want to control the minimum width of your popover window, just add an extra line in the css (or extra css) like this:
如果您想控制弹出窗口的最小宽度，只需在 css（或额外的 css）中添加额外的一行，如下所示：
.popover
{
min-width: 200px ! important;
}
(replace 200px with the desired value)
（将 200px 替换为所需的值）
回答by Dhanushka
1)Easy way :(warning:this will affect all popovers):
1）简单的方法:(警告：这会影响所有的弹出框）：
Just override the bootstrap .popover styles as below
只需覆盖 bootstrap .popover 样式，如下所示
.popover{
max-width: 600px;
}
2)Recommended way:
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>'
});
First add a custom class to the popover template like above my-custom-class. Note that popover will be rendered in using the default template unless you had specified a custom template.
首先像上面的 my-custom-class 一样向 popover 模板添加一个自定义类。请注意，除非您指定了自定义模板，否则将使用默认模板呈现弹出窗口。
Then override bootstrap's .popover styles like below :
然后覆盖引导程序的 .popover 样式，如下所示：
div.popover.my-custom-class{
max-width: 600px;
}
This styles let you to have a dynamic width up to 600px. If you need to set a minimum width to the popover, just set the width option directly. see example below,
此样式可让您拥有高达 600 像素的动态宽度。如果需要为popover设置最小宽度，直接设置width选项即可。见下面的例子，
div.popover.my-custom-class{
min-width: 600px;
}
When you increase the width, you may need to adjust the space (offset) between the popover box and the left/right page border. See the viewport property, as it sets the bounds.
增加宽度时，可能需要调整弹出框与左右页面边框的间距（偏移量）。查看视口属性，因为它设置了边界。
回答by Adam Libu?a
Disable max-widthin .popover:
禁止max-width在.popover：
.popover {
max-width: none;
}
And then you can play with the size of the content more freely.
然后您可以更自由地调整内容的大小。
回答by nicorellius
Some answer herein recommend just making the popoverclass a certain width. This is no good, because it affects all popovers. Use something like this instead, something more targeted:
这里的一些答案建议只使popover类具有一定的宽度。这不好，因为它会影响所有弹出窗口。使用类似这样的东西，更有针对性的东西：
.container-div .popover {
/* add styles here */
}
回答by Layke
Here's a sample initialization that I use.
这是我使用的示例初始化。
$(".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>',
});
As you can see, it uses a custom template. The template uses a custom popover-medium class.
如您所见，它使用自定义模板。该模板使用自定义的 popover-medium 类。
I then have a CSS selector
然后我有一个 CSS 选择器
.popover-medium {
max-width: 350px;
}
You could also just set a style on the template class if you wanted.
如果需要，您也可以在模板类上设置样式。
回答by John N
...
width:auto;
...
was the perfect solution in my case. I had multiple popovers on the same page and one of them has a long URL. All of them looks nice now. Thank you JFK!
在我的情况下是完美的解决方案。我在同一页面上有多个弹出框，其中一个有很长的 URL。他们现在看起来都不错。谢谢肯尼迪！
回答by GeistZero
Add your popover content as HTML with your own class and then in CSS file add:
使用您自己的类将弹出窗口内容添加为 HTML，然后在 CSS 文件中添加：
.popover .own-class { width: ... }
".own-class" element width will determine popover width.
“.own-class”元素宽度将决定弹出框的宽度。
