打印时阻止布尔玛丝带覆盖内容

问题描述 投票：0回答：1

我正在编写一份研究报告。当我想将报告另存为 pdf 时，导航功能区会覆盖内容。我怎样才能避免这种情况？

我不想用打印隐藏色带，但它们不应该覆盖内容。

我当前的丝带：

 <!-- top ribbon -->
  <nav id="navitop" class="navbar is-fixed-top">
    <div id="topc" class="columns">
      <div class="column is-12">
        <!-- disclaimer -->
        <h1 class="title disclaimer is-4">
          RESEARCH ONLY - <u>NOT</u> FOR CLINICAL USE
        </h1>
        <!-- disclaimer -->
      </div>
    </div>
  </nav>

  <!-- bottom ribbon -->
  <nav id="navibottom" class="navbar is-fixed-bottom">
    <div id="botc" class="columns is-gapless is-vcentered">
      <div class="column is-4">
        {{ meta.readable_id }}
      </div>
      <div class="column is-4">
        <!-- disclaimer -->
        <h1 class="title disclaimer is-6">
          RESEARCH ONLY <br /><u>NOT</u> FOR CLINICAL USE
        </h1>
        <!-- disclaimer -->
      </div>
      <div class="column is-4">
        {{ meta.timestamp }}
      </div>
    </div>
  </nav>
css sass printing less bulma
1个回答
0
投票

您需要将这种情况的特定类别添加到 html 或正文中，如官方文档中所述。

<html class="has-navbar-fixed-top has-navbar-fixed-bottom">

按原样，这仅适用于屏幕媒体。

要在印刷页面媒体上获得类似的结果，您需要在页面级别添加特定的类，如下所示：

@page {
    body.has-navbar-fixed-bottom, html.has-navbar-fixed-bottom {
        padding-bottom: 5cm;
    }
    
    body.has-navbar-fixed-top, html.has-navbar-fixed-top {
        padding-top: 5cm;
    }
}

此代码未经测试，但它应该可以让您了解。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.