인쇄 된 사이트 버전을 화면 크기의 영향을받지 않게하려면 어떻게합니까?

Question

나는 보고서를 생성하는 웹 사이트에서 작업 중이며이를 PDF로 인쇄 할 수 있습니다. 이러한 보고서는 동적이며 매번 다른 정보를 표시하므로 미리 PDF를 만들 수 없으며 사용자가 화면에 표시되는 내용부터 인쇄해야합니다.

모바일 레이아웃이 인쇄 상 렌더링되지 않도록 부트 스트랩 및 this fix을 사용하고 있습니다.

그러나 인쇄 버전이 여전히 웹 버전의 영향을 받기 때문에 사용자가 매우 작은 화면에서 보고서를 생성하는 경우 여전히 모바일 버전이 인쇄됩니다. 경우에도 문자 용지 크기가 수,

<div class="container"> 
<div class="row"> 
    <div class="col-md-3 col-sm-3"> 
    <div id="chart1"></div> 
    </div> 
    <div class="col-md-3 col-sm-3"> 
    <div id="chart2"></div> 
    </div> 
    <div class="col-md-6 col-sm-6"> 
    <div id="chart3"></div> 
    </div> 
</div> 
</div> 

은 "SM"클래스는 인쇄를 위해, 그러나 그것은 작은 화면 때문에 화면이 다른 행에 차트를 모두 표시되고있는 경우, 인쇄 버전은이 방법을 보여줍니다 세 개의 그래프를 한 행에 모두 수용 할 수 있습니다.

해결 방법이 있습니까?

Answer 1

@media 쿼리가 이에 해당합니다. 부트 스트랩 동작을 덮어 쓰려면 사용자 지정 미디어 쿼리를 적용해야합니다. UI가없고 빠른 것을 필요로하는 경우 부트 스트랩이 좋습니다.하지만 맞춤 개발에서는 도우미보다 엉덩이가 더 고통 스럽습니다.

는 클래스 변경되는 ALL을 .COL-MD-3 및 6 .COL-MD-괜찮하지 않는 한 나는, 그들에게 특정 클래스를 줄 것이다,

@media print { 
div.col-md-3 { 
    display:block;float:left;width:25%; 
} 
div.col-md-6{ 
    display:block;float:left;width:50%; 
} 
} 

그러나이 슈퍼 일반적인 수정을 시도 할 수 인쇄. (또는 부트 스트랩을 편집하고 인쇄물에 대한 미디어 쿼리를 추가하거나 정의 된 쿼리를 인쇄용으로 변경하십시오.)