为什么 bootstrap cols 在打印视图中换行？答案

【问题标题】：Why bootstrap cols break to new line in print view?为什么 bootstrap cols 在打印视图中换行？
【发布时间】：2022-01-07 23:12:37
【问题描述】：

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>

<div class="container-fluid">
  
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-6" style="background-color:yellow;">50%</div>
      <div class="col-sm-6" style="background-color:orange;">50%</div>
    </div>
    
    <div class="row">
      <div class="col-sm-4" style="background-color:yellow;">33.33%</div>
      <div class="col-sm-4" style="background-color:orange;">33.33%</div>
      <div class="col-sm-4" style="background-color:yellow;">33.33%</div>
    </div>
  </div>
</div>

</body>
</html>

在更大的屏幕上，您可以分别看到 2 列和 3 列，但在打印视图中，为什么每个列都在新行中？

【问题讨论】：

标签： css bootstrap-4

【解决方案1】：

因为 Bootstrap 的网格系统使用一系列容器、行和列来布局和对齐内容。它是用一个 flexbox 构建的，并且是完全响应的。

【讨论】：

但是我怎样才能让它在打印视图中看起来一样呢？
你不能在所有设备上都设置相同的宽度，因此，元素显示不同。