在文档的右上角显示文字？

Question

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

如何获得同样的效果，但在well内？

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

Answer 1

那是怎么回事：jsFiddle

应用.well:before {...}代替.corner_text:before {...}

<强>更新

为特定的井块应用'example element'：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添加类似自定义类的东西，或者你甚至可以用更少的东西来使用bootstrap变量和mixins。如果你希望文本是可添加的，那么最好忘记：after并稍微调整这个样式以将它应用于包含你想要的文本的特定元素并将其放在包装器中。

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

Answer 3

而不是将:before应用于外部div。我已将其设为.well并调整了填充顶部并向左调整为-20px ..

即

.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/