twitter-bootstrap 附加到 div 的引导箭头
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20963002/
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 arrow that's attached to div
提问by Lance
I'm very very new to bootstrap and front-end frameworks in general. But, I am able to notice the characteristics that sites that use bootstrap have in common. The following picture contains something that I find to be very ubiquitous amongst bootstrap sites. The downward (or any direction) blue arrow that's pointing the the text below it is what I'm referring too.
总的来说，我对引导程序和前端框架非常陌生。但是，我能够注意到使用引导程序的站点的共同特征。下图包含我发现在引导程序站点中非常普遍的内容。指向其下方文本的向下（或任何方向）蓝色箭头也是我所指的。
I used firebug to inspect the elements and found it to be something that was relevant to the .hero-unitdiv.
我使用 firebug 检查元素，发现它与.hero-unitdiv相关。
How exactly does this work and how is it accomplished?
这究竟是如何工作的，它是如何完成的？
回答by Schmalzy
It doesn't come standard with bootstrap but Here is a good articleon how to do with :afterwhich I believe is what you are looking for.
它不是引导程序的标准，但这是一篇关于如何处理的好文章:after，我相信这是您正在寻找的。
.hero:after {
z-index: -1;
position: absolute;
top: 100%;
left: 50%;
margin-left: -10px;
content:'';
width: 0;
height: 0;
border-top: solid 10px #e15915;
border-left: solid 10px transparent;
border-right: solid 10px transparent;
}
You make the triangle larger and smaller by adjusting the border-*attributes, and also the margin-left(border * -1).
您可以通过调整border-*属性以及 margin-left(border * -1) 来使三角形变大和变小。
回答by patrick
Here is what you found in firebug. Hero Unit does refer to a jumbotron-style header, a large header element that can be used in bootstrap. You can find this element here:
这是您在萤火虫中发现的内容。Hero Unit 确实引用了 jumbotron 风格的标题，这是一个可以在引导程序中使用的大标题元素。你可以在这里找到这个元素：
http://getbootstrap.com/2.3.2/components.html#typography
http://getbootstrap.com/2.3.2/components.html#typography
Still the arrow you are referring to seems to be something that has been designed by the developer and does not come with the bootstrap unit.
您所指的箭头似乎仍然是由开发人员设计的，并且没有随引导单元一起提供。
