html - 在右上角显示文本，就像在文档中一样？

Question

新的twitter-bootstrap 文档有一个很好的界面来分隔示例。

我如何获得同样的效果，但在well?

我的尝试：http: //jsfiddle.net/YdusM/

Answer 1

那怎么样：jsFiddle

.well:before {...}改为申请.corner_text:before {...}

更新：

为特定井块应用“示例元素”：jsFiddle

Answer 2

你可以检查文档中的代码，你会发现这个 css，应用于 exmaple 包装器：

.bs-docs-example::after {
content: "Example";
position: absolute;
top: -1px;
left: -1px;
padding: 3px 7px;
font-size: 12px;
font-weight: bold;
background-color: whiteSmoke;
border: 1px solid #DDD;
color: #9DA0A4;
-webkit-border-radius: 4px 0 4px 0;
-moz-border-radius: 4px 0 4px 0;
border-radius: 4px 0 4px 0;
}

将类似于自定义类的东西添加到您的 css 中，或者您甚至可以使用引导变量和 mixins 来减少它。如果您希望文本可添加，最好忘记 :after 并稍微调整此样式以将其应用于包含所需文本的特定元素并将其放置在包装器中。

编辑：
为了使定位起作用，您也应该将包装器设置position: relative;为。不知道你在追求什么，但我更新了你的小提琴来演示：http: //jsfiddle.net/YdusM/9/

Answer 3

而不是应用于:before外部div。我做到了.well并将填充顶部和左侧调整为-20px..

IE

.well:before {
  position: relative;
  content: "Example";
  top: -20px;
  left: -20px;
  padding: 3px 7px;
  font-size: 12px;
  font-weight: bold;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  color: #9da0a4;
  -webkit-border-radius: 4px 0 4px 0;
     -moz-border-radius: 4px 0 4px 0;
          border-radius: 4px 0 4px 0;
}

检查小提琴http://jsfiddle.net/YdusM/7/