css - 当 pre/code 内容太长时，列向右扩展，但期望使内容可滚动

Question

我有一个简单的三列布局:

<div class="container-fluid">
    <div class="row">
        {{!-- Left space --}}
        <div class="col-2 d-none d-md-block"></div>

        {{!-- Content --}}
        <div class="col px-5 py-4 post-body">
            {{{contents}}}
        </div>

        {{!-- Right space --}}
        <div class="col-2 d-none d-md-block"></div>
    </div>
</div>

当屏幕宽度小于 768px 时，中间列占据整个视口(viewport)宽度。这就是我想要的，到目前为止一切顺利!

但现在我在中间列中嵌入了源代码({{{contents}}} 的一部分，格式为 <pre> 和 <code> 标记。

<pre>
  <code class="hljs csharp">
    {{!-- Some code snippets --}}
  </code>
</pre>

如果像下面屏幕截图 (throw new InvalidOperationException("Places to shift must be greater then zero!");) 中的代码行太长，则在进一步减小视口(viewport)宽度时，中间列的行为不再符合预期。

正如您从该屏幕截图中看到的那样，它向右扩展。但是我期望它保持其宽度比并使代码可滚动。

这是我样式表中的相关 CSS 部分:

/* Code blocks */
code.hljs, code {
    border-style: solid;
  border-width: thin;
  border-color: white;
  border-radius: .3em;
  font-size: 0.8125rem; // 13px
  line-height: 21px;
}

code.hljs {
  margin-left: 0px;
  margin-right: 0px;
  padding: 1em; 
}

code {
  margin-left: 3px;
  margin-right: 3px;
  padding: 2px 4px;
}

我在这里做错了什么？

Answer 1

我想你想使用 col-md-8 col 以便它只在隐藏其他列时填充宽度...

<div class="container-fluid">
    <div class="row">
        <div class="col-2 d-none d-md-block">Left </div>
        <div class="col-md-8 col px-5 py-4 post-body border">
            <pre>
              <code class="hljs csharp">
              </code>
            </pre>
        </div>
        <div class="col-2 d-none d-md-block">Right </div>
    </div>
</div>

演示:https://codeply.com/p/D382XygPU5