html - बूटस्ट्रैप 3-प्रत्येक ग्रिड कॉलम के बाद प्रिंट लेआउट और ब्रेक



css twitter-bootstrap (3)

यदि आप यह उदाहरण लेते हैं (इसे यहां देखें: http://www.bootply.com/93816 )

<div class="container">
  <div class="row">
    <div class="col-md-6">Column1</div>
    <div class="col-md-6">Column2</div>
  </div>
</div>

जब आप जेनरेट किए गए पृष्ठ का प्रिंट पूर्वावलोकन करते हैं, तो ऐसा लगता है कि सामान्य ग्रिड लेआउट में उन्हें प्रदर्शित करने के बजाय कॉलम स्टैक / ब्रेक (जैसे फ़्लोट हटा दिया जाता है) का कारण बनता है।

मैंने bootstrap.css के @media print अनुभागों पर एक नज़र @media print और मैं div से संबंधित कुछ भी नहीं देख सकता जो ऐसा होने का कारण बनता है।

क्या किसी को पता है कि इससे कैसे बचें?

https://src-bin.com


Answer #1

Bojangles टिप्पणी मुझे सही दिशा में मिला, तो मैं अपने खुद के सवाल का जवाब दूंगा।

'Xs' आकार ग्रिड कॉलम का उपयोग करना, जो http://getbootstrap.com/css/#grid-options अनुसार है "अतिरिक्त छोटे डिवाइस फ़ोन (<768px)" के लिए है, बूटस्ट्रैप खुशी से प्रिंट के रूप में प्रिंट करता है।

<div class="container">
  <div class="row">
    <div class="col-xs-6">Column1</div>
    <div class="col-xs-6">Column2</div>
  </div>
</div>

Answer #2

जेरार्ड समाधान के आधार पर, आप बूटस्ट्रैप mixin .make-grid () इस तरह का उपयोग कर सकते हैं, इसलिए प्रिंट कभी xs आकार में नहीं आता है

@media print {
  .make-grid(sm);
}

या जेनरेट सीएसएस (यदि आप कम उपयोग करना पसंद नहीं करते हैं):

@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.66666667%;
  }
  .col-sm-10 {
    width: 83.33333333%;
  }
  .col-sm-9 {
    width: 75%;
  }
  .col-sm-8 {
    width: 66.66666667%;
  }
  .col-sm-7 {
    width: 58.33333333%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-5 {
    width: 41.66666667%;
  }
  .col-sm-4 {
    width: 33.33333333%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-2 {
    width: 16.66666667%;
  }
  .col-sm-1 {
    width: 8.33333333%;
  }
  .col-sm-pull-12 {
    right: 100%;
  }
  .col-sm-pull-11 {
    right: 91.66666667%;
  }
  .col-sm-pull-10 {
    right: 83.33333333%;
  }
  .col-sm-pull-9 {
    right: 75%;
  }
  .col-sm-pull-8 {
    right: 66.66666667%;
  }
  .col-sm-pull-7 {
    right: 58.33333333%;
  }
  .col-sm-pull-6 {
    right: 50%;
  }
  .col-sm-pull-5 {
    right: 41.66666667%;
  }
  .col-sm-pull-4 {
    right: 33.33333333%;
  }
  .col-sm-pull-3 {
    right: 25%;
  }
  .col-sm-pull-2 {
    right: 16.66666667%;
  }
  .col-sm-pull-1 {
    right: 8.33333333%;
  }
  .col-sm-pull-0 {
    right: auto;
  }
  .col-sm-push-12 {
    left: 100%;
  }
  .col-sm-push-11 {
    left: 91.66666667%;
  }
  .col-sm-push-10 {
    left: 83.33333333%;
  }
  .col-sm-push-9 {
    left: 75%;
  }
  .col-sm-push-8 {
    left: 66.66666667%;
  }
  .col-sm-push-7 {
    left: 58.33333333%;
  }
  .col-sm-push-6 {
    left: 50%;
  }
  .col-sm-push-5 {
    left: 41.66666667%;
  }
  .col-sm-push-4 {
    left: 33.33333333%;
  }
  .col-sm-push-3 {
    left: 25%;
  }
  .col-sm-push-2 {
    left: 16.66666667%;
  }
  .col-sm-push-1 {
    left: 8.33333333%;
  }
  .col-sm-push-0 {
    left: auto;
  }
  .col-sm-offset-12 {
    margin-left: 100%;
  }
  .col-sm-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-sm-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-sm-offset-9 {
    margin-left: 75%;
  }
  .col-sm-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-sm-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-sm-offset-6 {
    margin-left: 50%;
  }
  .col-sm-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-sm-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-sm-offset-3 {
    margin-left: 25%;
  }
  .col-sm-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-sm-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-sm-offset-0 {
    margin-left: 0%;
  }
}

Answer #3

समाधान तत्वों पर होना चाहिए न कि पेज स्वयं। आपको भी col-xs -.. पर भरोसा नहीं करना चाहिए क्योंकि ये छोटी स्क्रीन / डिवाइस के लिए हैं।

मुद्दा यह है कि पृष्ठ स्वयं पिक्सल के मामले में छोटा है, इसलिए बूटस्ट्रैप सोचता है कि इसे xs शैलियों को लागू करने की आवश्यकता है।

समस्या बूटस्ट्रैप टीम द्वारा संबोधित नहीं की जाएगी और https://code.google.com/p/chromium/issues/detail?id=273306 से संबंधित है

बूटस्ट्रैप समाधान अस्पष्ट रूप से इस 'quirky' व्यवहार https://github.com/twbs/bootstrap/issues/12078 दस्तावेज करना था।

मेरी राय में, एक कॉल-प्रिंट होना चाहिए- लेआउट कक्षाओं का सेट इतना छोटा और प्रिंट सह-अस्तित्व में हो सकता है।

मेरा अंतरिम समाधान निम्नानुसार है:

@media print {
  [class*="col-sm-"] {
    float: left;
  }
}

आप कॉल-प्रिंट का उपयोग कर सकते हैं, हमारे मामले में हम एसएम का उपयोग कर रहे हैं, एक्स नहीं, क्योंकि हम चाहते हैं कि एक्सएस लेआउट को अवरुद्ध करे, यही कारण है कि प्रिंट के लिए उन वर्गों का उपयोग करना काम नहीं करेगा।





printing