Bootstrap 4：如何将列打印为全角？答案

【问题标题】：Bootstrap 4 : how to print a column as full-width?Bootstrap 4：如何将列打印为全角？
【发布时间】：2021-05-10 22:59:15
【问题描述】：

我在 Bootstrap 中有两列，我只想让用户打印右列。

在左列添加类“d-print-none”，打印时隐藏左列。但是，右列不会拉伸到全宽。 col-md-8 宽度似乎仍然适用于列的宽度。

我尝试添加一个类“col-print-12”，但没有成功。

.col-print-12 {
  width: 100% !important;
  margin-left: 0;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<body>

    <div class="container-fluid">
      <div class="row">
        <div class="d-none d-md-block col-md-4 col-lg-3 col-xl-2 d-print-none">
          Sidebar to hide when printing
        </div>
        <div class="col-12 col-sm-12 col-md-8 col-lg-9 col-xl-10 col-print-12">
          Main content to print
        </div>
      </div>
    </div>

</body>

【问题讨论】：

标签： css bootstrap-4 printing

【解决方案1】：

尝试仅在第二个元素上使用 col 类来自动适应它：

<div class="container-fluid">
    <div class="row">
        <div class="border d-none d-md-block col-md-4 col-lg-3 col-xl-2 d-print-none">
            Sidebar to hide when printing
        </div>
        <div class="border col">
            Main content to print
        </div>
    </div>
</div>

（我添加了边框类以使元素在宽度上可见）

【讨论】：