HTML div를 인쇄하여 스타일이 부트 스트랩과 작동하지 않습니다.

자바 스크립트를 사용하여 div 콘텐츠를 인쇄하려고합니다. 스타일링을 위해 외부 CSS 파일을 사용하고 있습니다. 그러나 인쇄 문서는 bootstrap.css을 추가 한 후에 스타일을 적용하지 않습니다.HTML div를 인쇄하여 스타일이 부트 스트랩과 작동하지 않습니다.

여기 내 코드입니다. 그것은 미디어 쿼리에 문제가

HTML 페이지

<html> 
    <head> 
     <title>Print Div Test</title> 
     <link href="css/mycss.css" rel="stylesheet" /> 
     <link href="css/bootstrap.css" rel="stylesheet" /> 

     <script src="js/lib/jquery-1.11.1.js"></script> 
     <script type="text/javascript"> 

      function PrintElem() { 
       Popup($('#mydiv').html()); 
      } 

      function Popup(data) { 
       var mywindow = window.open('', 'my div', 'height=400,width=600'); 
       mywindow.document.write('<html><head><title>my div</title>'); 
       mywindow.document.write("<link rel=\"stylesheet\" href=\"css/bootstrap.css\" type=\"text/css\" media=\"print\" />"); 
       mywindow.document.write("<link rel=\"stylesheet\" href=\"css/mycss.css\" type=\"text/css\" />"); 
       mywindow.document.write('</head><body >'); 
       mywindow.document.write(data); 
       mywindow.document.write('</body></html>'); 

       mywindow.print(); 
       //mywindow.close(); 

       return true; 
      } 

     </script> 
    </head> 
<body> 
    <div> 
     <div id="mydiv" class="row"> 
      <h1>This will be printed. </h1> 
      <div class="col-md-6"> 
       <div style="color: red">In line styles applied.</div> 
      </div> 
      <div class="col-md-6"> 
       <div class="myclass">Style from sheet</div> 
      </div> 

     </div> 
<input type="button" value="Print Div" onclick="PrintElem()" /> 
</div> 
</body> 
</html>

CSS 파일

.myclass { 
    color: greenyellow; 
}

인가? 부트 스트랩을 추가하기 전에 다른 스타일로 작동합니다.

출처

2014-10-14 Janith Widarshana

이 .myclass {색상을 시도 내에서 더 추가해야 할 수도 있습니다 사용하는 미디어 쿼리를 추가 : greenyellow! important;} –

! important를 추가하는 것은 관련 요소에 대해 성공한 것이지만 인쇄 문서에 부트 스트랩 스타일을 적용해야합니다. 위의 예제 코드와 같이 전체 문서에 부트 스트랩 그리드 시스템을 사용하고 있습니다. –

예 부트 스트랩 미디어 쿼리에서 "문제"입니다. 부트 스트랩 CSS를 살펴보면 col-sm-xx가 768px, col-md-xx 이후 992px, A4 인쇄의 뷰포트가 670px라는 크기로 표시됩니다. (Safe Width in Pixel for Printing Web Pages?). 그래서 당신은 인쇄에 대한 사용자 COL-XS-XX에 있거나 COL-SM-xx는

@media print { 
     .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, 
     .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { 
      float: left;    
     } 

     .col-sm-12 { 
      width: 100%; 
     } 

     .col-sm-11 { 
      width: 91.66666666666666%; 
     } 

     .col-sm-10 { 
      width: 83.33333333333334%; 
     } 

     .col-sm-9 { 
      width: 75%; 
     } 

     .col-sm-8 { 
      width: 66.66666666666666%; 
     } 

     .col-sm-7 { 
      width: 58.333333333333336%; 
     } 

     .col-sm-6 { 
      width: 50%; 
     } 

     .col-sm-5 { 
      width: 41.66666666666667%; 
     } 

     .col-sm-4 { 
      width: 33.33333333333333%; 
     } 

     .col-sm-3 { 
      width: 25%; 
     } 

     .col-sm-2 { 
       width: 16.666666666666664%; 
     } 

     .col-sm-1 { 
       width: 8.333333333333332%; 
     }    
}

이 @media 인쇄

출처

2014-10-14 07:48:02 tmg

네, 저에게 좋습니다. 이것은 의미합니까? 사용자 정의 CSS 파일의 모든 부트 스트랩 CSS 클래스를 재정의해야합니까? –

최소 너비의 미디어 쿼리 안에있는 모든 것 같습니다. – tmg

HTML div를 인쇄하여 스타일이 부트 스트랩과 작동하지 않습니다.

답변

관련 문제