Html 为打印CSS设置样式时更改引导网格

我在页面上有一个DOM结构，看起来像这样：

<div class="container">
  <div class="row">
    <div class="col-lg-8 col-md-7 col-sm-8">
       Wide Stuff Here
    </div>
    <div class="col-lg-4 col-md-5 col-sm-4">
       Narrow Stuff Here
    </div>
  </div>
</div>

这里有很多东西
狭窄的东西

当我为打印设置此结构的样式时，我通常会隐藏右侧较窄列中的内容。但是，我仍然希望在打印页面上显示其中的两个内容。问题是，左侧较宽的容器中有更多的内容。因此，当该内容超过右侧列中的内容时，由于其右侧的空白，它在页面上看起来不合适

我的问题是如何解决这个问题。我想让左边的宽列中的内容从某个点或容器开始全宽，但不确定如何实现这一点。对于如何更好地表达这一点，我也持开放态度

更具体地说，这个页面显示了一个烹饪食谱。在左栏中，有一张大盘的图片，以及一系列图片和准备步骤。在右栏中，有一个包含配料的盒子和一个包含配方等级的盒子

---

非常感谢您的建议。

您可以将div显示在彼此上方，而不是彼此相邻。在css中，仅当传递窄列内容时才使宽列全宽是不可能的。@TVBZ您指的是哪个div？列（宽列&窄列）。它看起来不像一列挨着一列，而是更像是一行挨着一行。@TVBZ我相信将配料信息和菜肴图片并排放在一起是有意义的。然后，准备步骤如下，占据了整个页面的宽度。我理解。但它不能与当前的html结构一起工作。您可以尝试将html划分为多行并进行平衡。或者编写自己的css网格，这可能会更容易使用。您可以将div显示在彼此上方，而不是彼此相邻。在css中，仅当传递窄列内容时才使宽列全宽是不可能的。@TVBZ您指的是哪个div？列（宽列&窄列）。它看起来不像一列挨着一列，而是更像是一行挨着一行。@TVBZ我相信将配料信息和菜肴图片并排放在一起是有意义的。然后，准备步骤如下，占据了整个页面的宽度。我理解。但它不能与当前的html结构一起工作。您可以尝试将html划分为多行并进行平衡。或者编写自己的css网格，这可能更容易使用。