Bootstrap 3 - Drucklayout und Unterbrechungen nach jeder Rasterspalte

Wenn Sie dieses Beispiel nehmen (sehen Sie es hier: 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>

Wenn Sie eine Druckvorschau der generierten Seite erstellen, scheinen die Spalten gestapelt / unterbrochen zu werden (als ob der Float entfernt würde), anstatt sie im üblichen Rasterlayout anzuzeigen.

Ich habe mir die @media printAbschnitte von bootstrap.css angesehen und kann nichts sehen, was dazu führen divwürde, dass dies passiert.

Weiß jemand, wie man das vermeidet?

Bojangles Kommentar hat mich in die richtige Richtung gebracht, also werde ich meine eigene Frage beantworten.

Unter Verwendung der Rasterspalten der Größe 'xs', die laut http://getbootstrap.com/css/#grid-options für "Telefone mit besonders kleinen Geräten (<768px)" gelten, druckt Bootstrap wie erwartet.

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

Die Lösung muss auf den Elementen liegen, nicht auf der Seite selbst. Sie sollten sich auch nicht auf col-xs -... verlassen, da diese für kleine Bildschirme / Geräte bestimmt sind.

Das Problem ist, dass die Seite selbst in Bezug auf Pixel klein ist, sodass Bootstrap der Meinung ist, dass die xs-Stile angewendet werden müssen.

Das Problem wird vom Bootstrap-Team nicht behoben und steht im Zusammenhang mit https://code.google.com/p/chromium/issues/detail?id=273306

Die Bootstrap-Lösung bestand darin, dieses "skurrile" Verhalten https://github.com/twbs/bootstrap/issues/12078 dunkel zu dokumentieren .

Meiner Meinung nach sollte es einen Col-Print-Satz von Layoutklassen geben, damit extra klein und print nebeneinander existieren können.

Meine Zwischenlösung lautet wie folgt:

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

Sie können col-print verwenden. In unserem Fall verwenden wir sm und nicht xs, da xs das Layout blockieren soll. Daher funktioniert die Verwendung dieser Klassen für den Druck nicht.

Basierend auf der Gerard-Lösung können Sie das Bootstrap-Mixin .make-grid () wie folgt verwenden, damit der Druck niemals auf die xs-Größe fällt

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

oder das generierte CSS (wenn Sie nicht weniger verwenden möchten):

@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%;
  }
}

Ich habe eine separate print.css erstellt und Folgendes hinzugefügt:

@page {
    size: A3;
    margin-left: -5cm;
    margin-right: -5cm;
    }

Funktioniert gut mit Chrome, aber die negativen Ränder töten den Internet Explorer. Firefox scheint es nicht zu brauchen. Ich würde mich für einen anderen Ansatz interessieren.