移除旧应用HTML头部黑色方块问题求助

1. 先搞懂■是什么 #

■是HTML字符实体，对应的是黑色实心方块（■），也就是客户要求移除的右上角元素。

2. 为什么移除它会让整个彩色行消失？ #

你用的是Bootstrap栅格系统，默认情况下，col-md-*这类列元素的高度是由内部内容撑开的。看代码里的前7个列都是空div，只有最后一个列里有■这个内容——它是整个行里唯一撑高度的元素。一旦删掉它，所有列都没有内容，高度变成0，自然整个彩色行就看不见了。

3. 解决办法 #

方案一：给列设置最小高度（改动最小） #

不用大幅改HTML，只需要加一段CSS，让所有列保持一定高度，然后删掉最后一个列里的■就行：

.row .col-md-1, .row .col-md-2 {
  min-height: 20px; /* 高度可以根据需求调整 */
}

或者直接给整个行设置高度，效果一样：

.row {
  height: 20px;
}

方案二：单独给最后一列加高度 #

修改最后一个列的HTML，去掉字符实体，直接加内联样式设置高度：

<div class="col-md-1" style="background-color: #00ADE4; min-height: 20px;"></div>

方案三：用CSS渐变重构（最简洁） #

原来的8个div写法太冗余，用CSS线性渐变可以只用一个div实现完全相同的彩色条，后续维护更方便：

<div class="header-color-bar"></div>

对应的CSS：

.header-color-bar {
  height: 20px; /* 对应原行的高度 */
  background: linear-gradient(
    to right,
    #F6861F 8.33%,   /* col-md-1占1/12，即8.33% */
    #DD1372 8.33%, #DD1372 16.66%,
    #41AD49 16.66%, #41AD49 33.33%,
    #00AAC0 33.33%, #00AAC0 50%,
    #D32027 50%, #D32027 66.66%,
    #F49AC1 66.66%, #F49AC1 83.33%,
    #EBB700 83.33%, #EBB700 91.66%,
    #00ADE4 91.66%
  );
}

这个渐变的百分比严格对应原Bootstrap栅格的比例：总12份，col-md-1占1份（8.33%），col-md-2占2份（16.66%），颜色衔接位置和原布局完全一致。

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