更换成线的箭头引导酥料饼

Question

JSFIDDLE

我得到这个引导酥料饼的工作，但我不得不修改箭头成一水平线。这适用于popover的左侧和右侧。

这里是我要找修改成截图：

我相信那里将是一个很大的变化CSS，但不知道从哪里开始。

HTML：

<div class="container"> 
<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-placement="left" data-content="Some content">Hover Left</a> | 
<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-placement="right" data-content="Some content">Hover Right</a> 
</div> 

CSS：

.container { 
    text-align: center; 
    margin: 20% auto; 
    width: 100%; 
} 

JS：

$(document).ready(function(){ 
    $('[data-toggle="popover"]').popover(); 
}); 

Answer 1

我创建了左酥料饼与线边框。希望你可以创建合适的popover。在你的.css文件中添加下面的css代码

.container { 
text-align: center; 
margin: 20% auto; 
width: 100%; 
} 
.popover.left{ 
margin-left: -30px 
} 

.popover .arrow{ 
    border-width: 1px; 
} 
.popover.left .arrow:after { 
right: -20px; 
bottom: -12px; 
} 
.popover .arrow:after { 
border-width: 0px; 
content: ""; 
width: 30px; 
height: 1px; 
background-color: #ccc; 
}