使用Bootstrap 3.3.7在pre中列出组

Question

我在bootstrap中有一个列表组，它在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>

示例：https://jsfiddle.net/DTcHh/40698/

我找到了一个可能的解决方案：

.list-group-item {
    margin-bottom: -35px !important;
}

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

Answer 1

在CSS中，<pre>元素的默认值为white-space: pre。

只需将您的CSS更改为以下内容：

pre {
  white-space: normal;
}