22

ブートストラップ CSS/print に問題があります。

ブートストラップ CSS (reset.css) では、印刷のためにすべてがクリアされます

@media print {
  * {
    text-shadow: none !important;
    color: black !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

しかし、数行をカラーで印刷する必要があります。私のテーブルは次のようになります。

<div class="container">
    <div id="task-summary">
        <div id="process-summary">
            <table class="table table-condensed">
                <tbody>
                    <tr class="success">
                        <td>

これをコードに埋め込みましたが、機能しません:

@media print {

  #task-summary{
    .success{
      background-color: #DFF0D7 !important;
    }
  }
}

display: none を使用してcssが除外されているかどうかはすでに試しました..動作し（行は表示されません）、正しい場所にあるようです。

ブートストラップのreset.cssを編集せずに、ブートストラップcssコマンドをオーバーライドする方法を知っている人はいますか?

4

2 に答える 2

5

私も同じ問題を抱えていました。ページを印刷すると、background-color: ...;オプションは表の行では機能しません。CSS セレクターを次のように変更します。

@media print {

  #task-summary .success td {
    background-color: #DFF0D7 !important;

    /* add this line for better support in chrome */ 
    -webkit-print-color-adjust:exact;
  }
}

この変更後、すべてが機能するはずです。

于 2014-11-28T19:08:51.257 に答える
2 
@media print {
    .success {
      background-color: #DFF0D7 !important;
    }    
}

または

@media print {
    #task-summary .success {
      background-color: #DFF0D7 !important;
    }  
}

または

@media print {
    #task-summary > #process-summary .success {
      background-color: #DFF0D7;
    }
}
于 2013-05-11T07:34:22.143 に答える