में ट्विटर बूटस्ट्रैप प्रिंट्स मैं ट्विटर बूटस्ट्रैप 3 का उपयोग कर रहा हूं लेकिन जब मैं अपने वेबपृष्ठ (फाइल> प्रिंट के माध्यम से) प्रिंट करने के लिए जाता हूं तो यह एक्सएस (मोबाइल व्यू) में पेज प्रिंट कर रहा है, मैं इसे एमडी में उपयोग और प्रिंट करने के लिए कैसे मजबूर करूं (डेस्कटॉप दृश्य)।एक्सएस
यह केवल आईई संस्करण 9 और नीचे में ठीक काम करता है। हर दूसरे ब्राउज़र और आईई 10+ में समस्या है।
इसे ठीक करने के लिए मेरे सीएसएस
@media print {
body {
margin: 0;
padding: 0 !important;
min-width: 768px;
}
.container {
width: auto;
min-width: 750px;
}
}
यह मेरे लिए महान काम किया है लगता है के लिए निम्न मैं जोड़ दिया।
.col-xs-X मीडिया क्वेरी के बाहर है इसलिए यह प्रिंट करता है। सभी कॉलम एक ही आकार के हैं: 100/12 = 8.333333% तो .col-lg-6 और .col-sm-6 और .col-xs-6 और .col-md-6.container/.container-fluid के सभी 50% हैं।
कॉलम मुद्रित करने के लिए अपने मुद्रित पृष्ठ पाने के लिए आपको एक प्रिंट मीडिया क्वेरी जोड़ना होगा:
@media print {
.container {
max-width: none!important;
width: 100%!important;
padding-left: 0;
padding-right: 0;
}
.row {
margin-left: -1%;
margin-left: -1%;
}
[class*="col-"] {
float: left;
padding-left: 1%;
padding-right: 1%;
}
.col-sm-12,
.col-md-12,
.col-lg-12 {
width: 100%
}
.col-sm-11,
.col-md-11,
.col-lg-11 {
width: 91.66666667%
}
.col-sm-10,
.col-md-10,
.col-lg-10 {
width: 83.33333333%
}
.col-sm-9,
.col-md-9,
.col-lg-9 {
width: 75%
}
.col-sm-8,
.col-md-8,
.col-lg-8 {
width: 66.66666667%
}
.col-sm-7,
.col-md-7,
.col-lg-7 {
width: 58.33333333%
}
.col-sm-6,
.col-md-6,
.col-lg-6 {
width: 50%
}
.col-sm-5,
.col-md-5,
.col-lg-5 {
width: 41.66666667%
}
.col-sm-4,
.col-md-4,
.col-lg-4 {
width: 33.33333333%
}
.col-sm-3,
.col-md-3,
.col-lg-3 {
width: 25%
}
.col-sm-2,
.col-md-2,
.col-lg-2 {
width: 16.66666667%
}
.col-sm-1,
.col-md-1,
.col-lg-1 {
width: 8.33333333%
}
}
कृपया पढ़ें http://getbootstrap.com/getting-started/#support-printing
यह का सार यह है कि ब्राउज़र के मीडिया के प्रश्नों को गलत तरीके से संभाल/निराले ढंग से जब मुद्रण। वे भौतिक पेपर चौड़ाई के समान सीएसएस व्यूपोर्ट चौड़ाई का उपयोग नहीं करते हैं।
वर्कअराउंड विकल्पों में शामिल हैं:
@screen-* के मानों को कस्टमाइज़ करें कम वैरिएबल ताकि आपका प्रिंटर पेपर अतिरिक्त-छोटे से बड़ा माना जा सके।प्रिंटिंग अधिकांश ब्राउज़रों के साथ मुश्किल है - मुद्दा यह है कि ब्राउज़र, डिफ़ॉल्ट पेपर आकार और इसके अभिविन्यास (चित्र या परिदृश्य) और सिडनी में वर्तमान ज्वार के आधार पर एक पृष्ठ 72ppi, 96ppi या 144ppi में प्रिंट करेगा।
बूटस्ट्रैप में मीडिया क्वेरी एक पिक्सेल चौड़ाई बैंड स्थापित करती है ... उदा। "xs" 544px-767px के बीच है, इसलिए प्रिंटिंग के दौरान आपकी साइट "xs" या "sm" चौड़ाई के रूप में वापस आ सकती है (मुद्रित) पृष्ठ चौड़ाई के आधार पर।
@media print {} का उपयोग कर ऊपर सूचीबद्ध समाधान अधिकांश मामलों में चाल करेंगे - लेकिन तथ्य यह है कि साइट को प्रिंटिंग के साथ कोडिंग करने की आवश्यकता है।
मेरे पास vinorodrigues/print-ready पर एक उदाहरण है जो इनमें से कुछ मुद्दों और विचारों के लिए खाते की कोशिश करता है।