如何在Bootstrap网格col-2列中实现垂直居中的响应式竖排文本

刚好做过类似的需求，给你一套完整的解决方案，既能满足竖排文本要求，又能保证在col-2里完全居中，还能完美适配响应式布局：

1. 基础布局结构 #

先按照你要求的col-12 | col-10 | col-2结构搭建HTML，重点给col-2加上Bootstrap的flex类来实现精准居中：

<div class="container">
  <div class="row">
    <!-- 外层col-12包裹整个内容行 -->
    <div class="col-12">
      <div class="row align-items-stretch"> <!-- 强制col-10和col-2高度保持一致 -->
        <!-- 已占用的col-10区域 -->
        <div class="col-10 bg-light p-4">
          这里是已占用的col-10内容区域
        </div>
        <!-- 放置竖排文本的col-2 -->
        <div class="col-2 bg-secondary d-flex align-items-center justify-content-center p-2">
          <span class="vertical-text">whatever</span>
        </div>
      </div>
    </div>
  </div>
</div>

2. 竖排文本样式实现 #

用CSS原生的writing-mode属性实现竖排，比手动换行更灵活，还能自动适配1-2行的排版需求：

.vertical-text {
  /* 设置垂直排版方向，从右到左（英文用这个方向配合upright更美观） */
  writing-mode: vertical-rl;
  /* 让英文单字保持直立，避免默认的旋转效果 */
  text-orientation: upright;
  /* 可选：限制最大高度，防止文本过长溢出容器 */
  max-height: 80vh;
  overflow-wrap: break-word;
}

3. 关键细节说明 #

• align-items-stretch：给内层row添加这个类，能让col-10和col-2的高度始终同步，确保竖排文本在整行的垂直中心位置
• d-flex align-items-center justify-content-center：这三个Bootstrap内置类直接让col-2内部的文本同时实现水平居中和垂直居中，不管col-2的高度怎么变化都能稳在中心
• 响应式适配：Bootstrap网格会在小屏幕自动让col-10和col-2堆叠成满宽，此时竖排文本依然会在当前行的中心位置；如果想在小屏幕切换成横排，只需加一段媒体查询：

@media (max-width: 768px) {
  .vertical-text {
    writing-mode: horizontal-tb;
  }
}

测试一下就知道，不管col-10的内容高度如何变化，col-2里的竖排文本都会稳稳地处于中心位置，完全符合你的需求～

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