Bootstrap 4的内部带pre的媒体对象不考虑容器的宽度

Question

我将media object放在了引导程序的列中。如果我将带有较长代码串的<pre><code>...<code></pre>放入.media-body，则整个media object会超出列的边界。

这里是小提琴：https://jsfiddle.net/crazypilot/8dyq4v7x/16/

请帮帮我！

---

UPD：我想在该<pre><code>...<code></pre>上进行水平滚动，所以.media不会在列的宽度上溢出。

Answer 1

尝试一下：

.media-body {
    width: calc(100% - 40px);
}

40px =图片的宽度。

更好的方法：

.media {
    flex-direction: column;
}

.media-body {
    width: 100%;
}