当 pre/code 内容太长，但希望使内容可滚动时，列向右扩展答案

【问题标题】：Column expands to the right, when pre/code content is too long, but was expecting to make content scrollable当 pre/code 内容太长，但希望使内容可滚动时，列向右扩展
【发布时间】：2020-03-14 07:45:02
【问题描述】：

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

<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 时，中间的 col 占据整个视口宽度。这就是我想要的，到目前为止一切顺利！

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

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

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

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

这是我的样式表中相关的 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;
}

我在这里做错了什么？

【问题讨论】：

标签： css bootstrap-4 responsive-design

【解决方案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

【讨论】：