唯一的引导表标签

Question

我一直在尝试模仿他们网站文档部分中的 Bootstrap 表：

http://twitter.github.io/bootstrap/base-css.html#tables

我喜欢表格中包含“示例”标签的方式。但是，我不想显示相同的表名，而是想为每个单独的表显示一个唯一的标签（在我的例子中显示不同的年份）。看起来很简单，但有些事情不正常。

我的 HTML：

<div id="2003" class="bs-docs-example">
  <table class="table table-striped">
...

<div id="2013" class="bs-docs-example">
  <table class="table table-striped">
...

我的 CSS：

/*Original CSS from Bootstrap*/
.bs-docs-example:after {
content: "Example";
position: absolute;
top: -1px;
left: -1px;
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;
}

/*My additional CSS*/
#2003.bs-docs-example:after {
content: "2003";
}

#2013.bs-docs_example:after {
content: "2013";
}

更新：我做了一个小提琴。看看吧。

http://jsfiddle.net/Qp4kg/3/

Answer 1

您忘记复制bs-docs-example 类的一条规则：

.bs-docs-example {
    position: relative;
    margin: 15px 0;
    padding: 39px 19px 14px;
    background-color: #fff;
    border: 1px solid #ddd;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

结果：http://jsfiddle.net/Qp4kg/3/

重要：

ID 和 NAME 标记必须以字母 ([A-Za-z]) 开头，并且可以是 后跟任意数量的字母、数字 ([0-9])、连字符 ("-")、 下划线（“_”）、冒号（“:”）和句点（“.”）。