인쇄 부트 스트랩 기반 레이아웃을 단일 열 모드로 변경

Question

Boostrap의 격자 레이아웃을 기반으로하는 페이지가 인쇄 될 때 단일 열 모드로 축소됩니다. 아무도 왜 그런지,이 문제를 해결하는 방법을 알고 있습니까?

이 문제는 http://getbootstrap.com/css/#grid에서 Ctrl + P를 누르면 가장 잘 나타납니다.

Answer 1

CSS로 정의 된 사이트의 인쇄 가능한 버전입니다. 대부분의 스타일은 쉽게 인쇄 할 수 있도록 제거됩니다. 제공된 스타일을 덮어 쓰면됩니다.

Answer 2

크롬으로 인쇄하는 경우 this bootstrap issue 일 때 크롬이 인쇄 매체의 너비를 768 픽셀보다 작게 설정하여 열을 xs/"매우 작음"영역으로 이동시키는 것 같습니다. Thus, your col-sm-* and larger column classes will be stacked.

그러나 미디어에 렌더링 할 때 col-xs-* 열은 screen 대 print 일 때 일관성이 없습니다. 개인적으로, 나는 screen CSS 미디어 모드에서 print CSS 미디어 모드에서 뭔가하지를 columnize 싶었다, 그래서 나는이 사용 JQuery와 같은 print-col-xs-6라는 클래스에 대한 col-xs-6을 주입하는 크롬의 pre-print callback에 중독 :

var beforePrint = function() { 
    console.log('Functionality to run before printing.'); 
    $('.print-col-xs-6').addClass('col-xs-6') 
}; 
var afterPrint = function() { 
    console.log('Functionality to run after printing'); 
    set_timeout(function() { 
     $('.print-col-xs-6').removeClass('col-xs-6') 
    },500) 
}; 

if (window.matchMedia) { 
    var mediaQueryList = window.matchMedia('print'); 
    mediaQueryList.addListener(function(mql) { 
     if (mql.matches) { 
      beforePrint(); 
     } else { 
      afterPrint(); 
     } 
    }); 
} 

나는 아니에요 시간 초과가 필요하고 내 응용 프로그램이 집안 사람들을위한 것이므로 크롬을 사용해야합니다 .-D