Bootstrap栅格布局实现标题轻覆序号、序号置于列外的效果

实现方案 #

调整CSS定位规则即可实现需求，修改后的完整样式如下：

/* 可给左侧列加自定义类名比如.step-left-col，避免影响其他列样式 */
.col-md-7 {
  position: relative;
  overflow: visible;
}

h3 {
  position: relative;
  margin: 0;
  padding-top: 40px;
}

.five-steps-number {
  font-size: 170px;
  color: #FFF0C2;
  font-weight: 700;
  position: absolute;
  left: -90px; /* 调整数值控制序号向外露出的长度，外层套container的话可改为-120px */
  top: 0;
  z-index: 1;
  line-height: 1;
}

.five-steps-title {
  font-size: 78px;
  color: #00666A;
  font-weight: 100;
  position: relative;
  z-index: 2;
  left: 20px; /* 调整数值控制标题覆盖序号的幅度 */
  line-height: 1.2;
}

/* 移动端适配，避免小屏下序号超出可视区域 */
@media (max-width: 991px) {
  .five-steps-number {
    left: 0;
  }
  .five-steps-title {
    left: 10px;
  }
}

原有HTML代码无需修改即可生效，可根据实际视觉效果灵活调整各个定位数值。

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