如何垂直显示Bootstrap列表组文本？

嘿，我懂你现在的困扰——用旋转实现垂直文本后右侧留着空白，确实影响布局效果。咱们来一步步调整你的代码，达到理想的垂直显示且无多余空白的效果。

问题根源分析 #

你当前用rotate(-90deg)加translate的方式，本质是把水平布局的元素旋转了，但元素原来的水平占位空间并没有被消除，所以右侧会留下空白。而且这种方式还可能带来布局偏移的问题，不如直接用CSS原生的垂直文本属性更稳妥。

方案一：使用CSS writing-mode（推荐） #

这是现代浏览器支持的原生垂直文本方案，完全不需要旋转，自然不会有空白问题，代码也更简洁：

修改后的样式代码 #

.list-group {
  /* 设置垂直文本方向，从右到左、从上到下 */
  writing-mode: vertical-rl;
  text-orientation: upright; /* 让字母保持直立，不旋转 */
  background: black;
  /* 让容器只占内容所需宽度 */
  width: fit-content;
}

.list-group-item {
  color: white; /* 加白色文字，在黑色背景上更清晰 */
  padding: 8px 12px;
  list-style: none;
  border-bottom: 1px solid #333;
}

对应的列表代码 #

<ul class="list-group">
  <li class="list-group-item">A</li>
  <li class="list-group-item">B</li>
  <li class="list-group-item">C</li>
  <li class="list-group-item">D</li>
  <li class="list-group-item">E</li>
</ul>

这个方案的优势是：原生支持垂直布局，容器只会占用垂直文本所需的空间，不会留下多余空白，而且兼容性在现代浏览器里很好（IE11也支持部分写法）。

方案二：优化你的旋转方案（兼容旧浏览器） #

如果你必须用旋转的方式，需要调整transform-origin和容器的尺寸，同时隐藏多余的空间：

修改后的样式代码 #

.list-group {
  /* 把容器设为inline-block，只占内容所需宽度 */
  display: inline-block;
  /* 旋转原点调整到左下角 */
  transform-origin: 0 100%;
  transform: rotate(-90deg) translateY(-100%);
  background: black;
}

.list-group-item {
  background: black;
  color: white;
  padding: 8px 12px;
  list-style: none;
  border-bottom: 1px solid #333;
}

/* 包装容器避免影响其他布局 */
.vertical-container {
  display: inline-block;
  overflow: hidden;
  height: fit-content;
}

对应的列表代码 #

<div class="vertical-container">
  <ul class="list-group">
    <li class="list-group-item">A</li>
    <li class="list-group-item">B</li>
    <li class="list-group-item">C</li>
    <li class="list-group-item">D</li>
    <li class="list-group-item">E</li>
  </ul>
</div>

这个方案通过调整旋转原点和translate的数值，让旋转后的元素刚好贴合容器，再用inline-block和overflow:hidden消除多余空白。

你可以根据自己的浏览器兼容需求选择方案，推荐优先用writing-mode，代码更简洁也更符合CSS的布局逻辑。

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