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

【问题标题】：Show text in the top-right corner, like in docs?在右上角显示文本，就像在文档中一样？
【发布时间】：2012-08-22 18:23:27
【问题描述】：

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

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

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

【问题讨论】：

不，只需要与文本周围完全相同的背景颜色 + 边框：“示例”。所以想要在well 的左上角。感谢您的帮助

标签： html css layout twitter-bootstrap responsive-design

【解决方案1】：

怎么样：jsFiddle

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

更新：

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

【讨论】：

谢谢，这行得通，但我在页面上有其他 wells，我不想受此影响...我该怎么做？
我已经更新了我的答案。只需使用特定的类，例如：.example-block:before {...}

【解决方案2】：

而不是将: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/

【讨论】：

【解决方案3】：

您只需检查文档中的代码，就会发现这个 css 应用于示例包装器：

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

【讨论】：

知道如何修改这个以添加可调整的文本吗？
@Oyslo：当然，您只需要添加一个带有文本标签的额外 div，并使用特定类对其应用所有样式（没有content: offcourse） .像这样：jsfiddle.net/YdusM/15