Twitter bootstrap 使用Bootstrap 3.3.7在pre中列出组

我在引导程序中有一个列表组，它位于pre中，因为它包含其他数据，问题是当我将列表组置于pre中时，项目与列表分离

代码：

<pre>
  Text
  A lot of messy text that needs pre to look good
  <ul class='list-group'>
    <li class='list-group-item active'>lista</li>
    <li class='list-group-item'>test</li>
  </ul>
</pre>

---

乍一看，它是有效的，但我想知道是否有更好的解决方案？

在CSS中，

导致该CSS预中断的效果，我需要使用pre，以便文本看起来很好，否则会堆积起来再次将CSS更改为：pre ul{white space:normal；}
.list-group-item {
    margin-bottom: -35px !important;
}

pre {
  white-space: normal;
}