Bootstrap面板标题添加特色角标：适配分辨率问题求助

看起来你的角标错位问题主要出在定位参考容器错误和使用固定像素/em值上，这些设置在屏幕分辨率变化时无法自适应，导致角标偏离面板角落。下面是修复后的完整代码和关键改动说明：

修改后的HTML代码 #

（HTML结构无需大改，确保.panel是角标的父容器即可）

<div class="col-lg-6">
  <div class="panel">
    <div class="ribbon-wrapper-featured">
      <div class="featured fa"></div>
    </div>
    <div class="panel-heading">
      <h3 class="panel-title">Select Activity Stream</h3>
    </div>
    <div class="panel-body">
    </div>
  </div>
</div>

修改后的CSS代码 #

<style>
/* 核心：给面板添加相对定位，让内部绝对定位元素以面板为参考 */
.panel {
  position: relative;
  overflow: hidden; /* 可选：防止角标超出面板范围，优化视觉效果 */
}

/* Corner Ribbon Styles */
.ribbon-wrapper-featured {
  position: absolute;
  top: 0; /* 对齐面板顶部 */
  right: 0; /* 对齐面板右侧 */
}

.featured.fa {
  width: 100px;
  height: 100px;
  display: block;
  position: relative; /* 让伪元素相对于当前容器定位 */
}

.featured.fa::before {
  position: absolute;
  right: 10px;
  top: 10px;
  margin: .25em;
  color: gold;
  z-index: 2;
  content: "\f005"; /* 这里替换成你需要的Font Awesome图标代码，比如星星 */
}

.featured::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0; /* 对齐角标容器的右上角 */
  border-width: 20px;
  border-style: solid;
  border-color: #03a9f4 transparent transparent #03a9f4;
  z-index: 1;
}

.panel-title {
  background-color: #232323;
  text-transform: uppercase;
  font-family: 'Open Sans Condensed', sans-serif;
  color: #03a9f4;
  font-size: 1.5em;
  padding: 0 20px 0 60px;
}
</style>

关键改动说明 #

1. 给.panel添加position: relative：这是解决错位的核心！之前角标的绝对定位参考的是整个文档，现在改为以面板为容器，不管屏幕怎么缩放，角标都会牢牢贴在面板的右上角。
2. 调整.ribbon-wrapper-featured的定位：用top: 0; right: 0直接对齐面板角落，替代原来的固定负top值，避免在不同屏幕下偏离位置。
3. 移除固定的left: -38.4em：这个固定值是导致错位的元凶，改用right: 0配合border属性生成三角，确保三角始终在正确的角落位置。
4. （可选）添加overflow: hidden：防止角标超出面板的可视范围，让整体布局更整洁。

如果想要三角大小随屏幕自适应，可以把border-width: 20px改成border-width: 2vw（视窗宽度单位），这样三角会根据屏幕宽度按比例缩放。

内容的提问来源于stack exchange，提问作者Navyseal