自定义Twitter Bootstrap Popover箭头

如果要更改其箭头的外观，请使用引导较少的变量来实现.// Tooltips and popovers// -------------------------@tooltipColor: #fff;@tooltipBackground: #000;@tooltipArrowWidth: 5px;@tooltipArrowColor: @tooltipBackground;@popoverBackground: #fff;@popoverArrowWidth: 10px;@popoverArrowColor: #fff;@popoverTitleBackground: darken(@popoverBackground, 3%);// Special enhancement for popovers@popoverArrowOuterWidth: @popoverArrowWidth + 1;@popoverArrowOuterColor: rgba(0,0,0,.25);如果您使用的是Sass，请对 Sass变量.可悲的是， TB-Customizer 没有所有变量，因此您可能拥有自行编译.好消息，新的 Bootstrap 3定制程序现在提供了这些选项.I could not find any relevant information on this, but I find it hard to swallow that it's not doable.How can I customise the arrow for the popovers? I already did but changing the classes .arrow and such, but the position of the popover gets screwed up.So, what is the correct way to do so? I couldn't find any documentation.Following are the classes I've been using, so far the arrow looks wrong:.popover { position: absolute; top: 0; left: 0; z-index: 1010; display: none; padding: 5px;} .popover.top { margin-top: -5px; } .popover.right { margin-left: 5px; } .popover.bottom { margin-top: 5px; } .popover.left { margin-left: -5px; } .popover.top .arrow { bottom: 0; left: 50%; margin-left: -5px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #000000; } .popover.right .arrow { top: 50%; left: 0; margin-top: -5px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 5px solid #000000; } .popover.bottom .arrow { top: 0px; left: 50%; margin-left: -5px; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 19px solid #000000; } .popover.left .arrow { top: 50%; right: 0; margin-top: -5px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid #000000; } .popover .arrow { position: absolute; width: 0; height: 0; }.popover-inner { padding: 3px; width: auto; overflow: hidden; background: #000000; background: rgba(0, 0, 0, 0.8); -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);}.popover-title { padding: 9px 15px; line-height: 1; background-color: #252525; -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; background-color: rgba(37, 37, 37, 0.7); font-size: 14px; color: #7e7e7e;}.popover-content { padding: 14px; background-color: #252525; -webkit-border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; -webkit-background-clip: padding-box; -moz-background-clip: padding-box; background-clip: padding-box; background-color: rgba(37, 37, 37, 0.7);} .popover-content p, .popover-content ul, .popover-content ol { margin-bottom: 0; } .popover-content table { background: transparent; } .popover-content table td { border: 0px; background: transparent; color: #7e7e7e; }The arrow should be pointing to the red squareThanks. 解决方案 Twitter Bootstrap is based on Less.If you want to change the appearance of its arrows use the bootstrap less variables to do so.// Tooltips and popovers// -------------------------@tooltipColor: #fff;@tooltipBackground: #000;@tooltipArrowWidth: 5px;@tooltipArrowColor: @tooltipBackground;@popoverBackground: #fff;@popoverArrowWidth: 10px;@popoverArrowColor: #fff;@popoverTitleBackground: darken(@popoverBackground, 3%);// Special enhancement for popovers@popoverArrowOuterWidth: @popoverArrowWidth + 1;@popoverArrowOuterColor: rgba(0,0,0,.25);If you are using Sass instead do the same with the Sass Variables.Sadly the TB-Customizer doesn't have all the variables so you might have to compile it on your own.Edit:Good news the new Bootstrap 3 customizer now provides these options. 这篇关于自定义Twitter Bootstrap Popover箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！