Css 如何在div上正确定位垂直文本？

我有一张由DIV在bootstrap上制作的桌子。我想在第一列的文字是垂直方向-90度。我能够成功地翻转文本，但是，如果文本较长，它会松开位置

它总是显示在这个屏幕截图上：

我在网上尝试了几种技术，但似乎没有一种能解决我的问题

1.横向定价{ 最小高度：250px； 位置：相对位置； } .垂直文本{ 变换：旋转-90度； 变换原点：右，顶部； -ms变换：旋转-90度； -ms变换原点：右，顶部； -webkit变换：旋转-90度； -webkit变换原点：右，顶部； 位置：绝对位置； 字体系列：“蒙特塞拉特黑体”，无衬线； 字体大小：20px； 颜色：3c99ef； 边缘顶部：100px； } 灯光1 呜呜呜呜 灯光2 呜呜呜呜 专业1 呜呜呜呜 专业2 呜呜呜呜 性能1 呜呜呜呜 性能2 呜呜呜呜 使用

.垂直文本{ 书写方式：垂直lr； 变换：旋转-180度； } .行{ 边框：1px纯绿色； } 灯光1 呜呜呜呜 灯光2 呜呜呜呜 专业1 呜呜呜呜 专业2 呜呜呜呜 性能1 呜呜呜呜 性能2 呜呜呜呜

---

你真的想在没有内容的情况下关闭，然后在灯光1后关闭，然后再关闭行吗

<div class="container purple-accent">
  <div class="row">
    <div class="pricing-box horizontal-pricing">  

//THINK ABOUT THIS PART OUF YOUR CODE
<div class="row">
    <div class="pricing-box horizontal-pricing">
      <div class="col-sm-4 col-md-4">
        <div>
          <div class="verticaltext">Light 1</div>
        </div>
      </div>

根据您的格式，我认为这更符合您的要求：

<div class="row">
    <div class="pricing-box horizontal-pricing">
      <div class="col-sm-4 col-md-4">
          <div class="verticaltext">Light 1</div>
      </div>
    </div>
    more div's inside row here

Protip:col-md-8在col-sm-8 col-md-8中是多余的。你有很多东西