Bootstrap 4 Beta3中form-inline打印显示为form-horizontal问题求助

嘿，我来帮你搞定这个打印样式的麻烦！你遇到的情况其实是Bootstrap 4 Beta3的默认打印样式在捣鬼——为了适配纸张的纵向布局，框架默认把form-inline在打印时改成了类似form-horizontal的垂直排列，但这显然不符合你的需求。

问题根源 #

Bootstrap的打印媒体查询（@media print）中，对form-inline的布局做了调整：比如将其display属性从inline-flex改成了block，同时重置了内部元素的对齐方式，直接导致打印时布局从横向变成了垂直。

解决方案：自定义打印样式覆盖默认设置 #

你只需要添加一段自定义CSS，在打印时强制form-inline保持和屏幕上一致的布局。下面是具体实现步骤：

1. 添加自定义打印样式：

@media print {
  .form-inline {
    display: inline-flex !important;
    flex-flow: row wrap !important;
    align-items: center !important;
  }
  .form-inline .form-group {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-flow: row wrap !important;
    align-items: center !important;
    margin-bottom: 0 !important;
  }
  /* 保持栅格列的宽度一致，可选但推荐 */
  .form-inline .col-sm-2 {
    flex: 0 0 16.666667% !important;
    max-width: 16.666667% !important;
  }
}

2. 修改后的完整HTML代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Form Inline Print Fix</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
  <style>
    @media print {
      .form-inline {
        display: inline-flex !important;
        flex-flow: row wrap !important;
        align-items: center !important;
      }
      .form-inline .form-group {
        display: flex !important;
        flex: 0 0 auto !important;
        flex-flow: row wrap !important;
        align-items: center !important;
        margin-bottom: 0 !important;
      }
      .form-inline .col-sm-2 {
        flex: 0 0 16.666667% !important;
        max-width: 16.666667% !important;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <form class="form-inline">
      <p>&nbsp;</p>
      <div class="row">
        <div class="col-sm-2">
          <label for="inputEmail3" class="form-control-label">Email</label>
        </div>
        <div class="col-sm-2">
          <input type="text" class="form-control" placeholder="email">
        </div>
      </div>
    </form>
  </div>
</body>
</html>

额外小提示 #

• 我注意到你在form-inline里面嵌套了row和col组件，其实form-inline本身已经是flex布局，如果你不需要复杂的栅格对齐，直接用form-inline的内置类（比如form-group）简化结构，打印样式的调整会更省心。
• 用!important是为了确保自定义样式能覆盖Bootstrap的默认打印样式，毕竟框架的打印样式优先级也不低。

这样调整后，打印页面的布局就会和屏幕上的form-inline完全一致啦！

内容的提问来源于stack exchange，提问作者user441058