webentwicklung-frage-antwort-db.com.de

Bootstrap 3 - Drucklayout und Unterbrechungen nach jeder Rasterspalte

Wenn Sie dieses Beispiel nehmen (sehen Sie es hier an: 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 zu stapeln/brechen (als ob der Float entfernt wäre), anstatt sie im üblichen Rasterlayout anzuzeigen.

Ich habe mir den @media print Abschnitte von bootstrap.css und ich können nichts im Zusammenhang mit div sehen, das dazu führen würde, dass dies passiert.

Weiß jemand, wie man das vermeidet?

htmlcsstwitter-bootstrapprinting
73
AndyC

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

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

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

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

Das Problem ist, dass die Seite selbst in Bezug auf Pixel klein ist, so dass bootstrap denkt, dass es die xs-Stile anwenden muss.

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 unübersichtlich zu dokumentieren https: //github.com/twbs/bootstrap/issues/12078 .

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önnten col-print verwenden, in unserem Fall verwenden wir sm und nicht xs, weil wir möchten, dass xs das Layout blockiert, weshalb die Verwendung dieser Klassen für den Druck nicht funktioniert.

33
Gerard

Basierend auf der Gerard-Lösung können Sie bootstrap mixin .make-grid () wie folgt verwenden, damit der Ausdruck nie auf die xs-Größe fällt

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

oder die 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%;
  }
}
18
Paolo Sanchi

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 IE. Firefox scheint es nicht zu brauchen. Mich würde ein anderer Ansatz interessieren.

7
user3108913