CSS 左定位 Bootstrap Popover
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13070870/
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
Left-Positioning A Bootstrap Popover
提问by Peter
I have a popover that appears to the left of a label:
我有一个出现在标签左侧的弹出框：
$('label').hover(function () {
$(this).popover({
offset: 10,
placement: 'left'
}).popover('show');
The popover is currently blocking a radio button and I want to move it left, say, 10px. I can't seem to figure out how to do this. offset seems to do nothing at all (If I add 10 or 10000 it doesn't make a difference). Here is the HTML for one such label:
弹出框当前阻止了一个单选按钮，我想将其向左移动，例如 10 像素。我似乎无法弄清楚如何做到这一点。offset 似乎什么都不做（如果我添加 10 或 10000，它没有任何区别）。这是一个这样的标签的 HTML：
<label for="MainContent_Wizard1_rbLeader" id="MainContent_Wizard1_lblLeader" class="radio" data-original-title="Visionary Giving Level" data-content="Diamond (full-page ad) + 2 dinner tickets">Visionary (0,000)<span class="radio" name="rbLeader"><input id="MainContent_Wizard1_rbLeader" type="radio" name="ctl00$MainContent$Wizard1$GivingLevel" value="rbLeader" onclick="WizardStep1_Click();" /></span></label>
I can try to set the popover position by overriding the class in CSS with something like:
我可以尝试通过使用以下内容覆盖 CSS 中的类来设置弹出框位置：
.popover {
left: 380px !important;
}
but this is far from ideal as it appears in different spots using different browsers.
但这远非理想，因为它使用不同的浏览器出现在不同的地方。
There mustbe a way of adding a small right margin, yes?
还有必须要增加一个小的右边界的一种方式，是吗？
Thanks.
谢谢。
回答by davidkonrad
It seems rather impossible to style a single popover, and - as Sara mention - there is no such option as offset(you may think of qtip?). However, you can use the undocumented option template, "derived" from the tooltipoptions (in fact, popover only introduces content).
似乎不可能为单个弹出框设置样式，而且 - 正如 Sara 所提到的 - 没有这样的选项offset（您可能会想到 qtip？）。但是，您可以使用未记录的选项template，从选项中“派生” tooltip（实际上，popover 仅引入了content）。
By modifying templateyou can individually style each popover! It seems to me your problem is the arrowmore than the popover itself, so you can try to move the arrow up or down from the middle, simply by adding a style for arrow to the template, like this
通过修改，template您可以单独设置每个弹出框的样式！在我看来，你的问题arrow不仅仅是弹出框本身，所以你可以尝试从中间向上或向下移动箭头，只需向模板添加箭头样式，就像这样
$('label').hover(function() {
$(this).popover({
placement: 'left',
template: '<div class="popover"><div class="arrow" style="top:65px;"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
}).popover('show');
});
of course, here the arrows for all popovers set for all labels will be modified due to the $('label').hover, but popovers can be styled individually without CSS if you want, those without radio buttons may not need to.
当然，这里为所有标签设置的所有弹出框的箭头将被修改$('label').hover，但如果你愿意，弹出框可以单独设置样式而无需 CSS，没有单选按钮的可能不需要。
UPDATE - style the whole popover +10px to the left
更新 - 将整个弹出框的样式设置为向左 +10px
...
template: '<div class="popover" style="margin-left:-10px;"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
...
回答by marcottsilva
Try this to add the right margin:
试试这个来添加右边距：
.popover.left{
left: calc(100% - 10px) !important;
}
回答by Eliseo
You can add data-placement='left' to the element.
您可以将 data-placement='left' 添加到元素。
