it-swarm.com.de

Seite mit Bootstrap drucken 3

Ich habe hier bei stackoverflow viele Antworten durchgesehen, die das halbe Cover betreffen, worüber ich mich wundere, aber nichts gefunden hat, was für mich funktioniert.

Ich verstehe, dass die Druckseite für A4 etwa 550 px beträgt. Bootstrap verwendet daher die Stile und das Layout, die normalerweise für mobile Geräte verwendet werden.

Wenn ich Strg + P für meine Webseite verwende, sieht die druckbare Seite genauso aus wie die mobile Version meiner Seite. Aber wie kann ich die Desktop-Version aussehen lassen? (media> 1024 px) Gibt es eine Möglichkeit, dies zu tun?

Ich weiß, dass ich die CSS speziell für den Druck ändern kann. Aber wie löst man dieses Ding mit dem Bootstrap 3-Grid-System? Die Breite in meinen divs hängt davon ab, was ich für col-xs hinzugefügt habe, aber ich möchte, dass print das Layout (width) für col-md verwendet

Edit: Nachdem ich mich einige Stunden damit beschäftigt habe, ist mir klar, dass es komplexer sein könnte, als ich zuerst erwartet hatte. Nur das Ändern der Breite löst das für mich nicht. Viele meiner divs haben die Syntax von 

<div class="md-right sm-right xs-down col-md-1 col-sm-2 box"></div>

oder

<div class="col-md-4 col-sm-6 col-xs-12"></div>

Die Seite sieht in XS für kleine Geräte gut aus, aber das Drucken in XS lässt viele Elemente gigantisch erscheinen. Die Frage bleibt also. Gibt es eine Möglichkeit, die Druckseite genauso wie das Layout für mittlere oder große Geräte aussehen zu lassen? Oder muss ich das Druck-CSS ohne Bootstrap-Grid-System erstellen und statische Breiten für alle Elemente hinzufügen, um dies zu erreichen?

Danke im Voraus

34
user2890488

Am Ende habe ich das Problem gelöst, indem ich eine eigene Datei print.css verwendet habe, ohne dass alle darauf ansprechenden Bootstraps enthalten waren. Nur einige der notwendigen Bootstrap-Dinge mit show and hide enthalten.

4
user2890488

Es wäre hilfreich, eine JSBin bereitzustellen. Da ich dieses Layout in JSBin mit col-sm- (Sternchen) hatte, können Sie einfach alle -sm- in -xs- zwischen der Printmedien-Abfrage ändern. Alle Prozentsätze sind an jedem Haltepunkt gleich. Wenn Sie also sm in xs ändern, werden diese gedruckt und die anderen Sternklassen werden ignoriert. Ahh, ich habe den Post jetzt gelesen, du musst alle col-sm in col-md ändern und dann! Wichtig verwenden, das sollte es tun. Die xs-Spalte befindet sich außerhalb von Medienabfragen. Deshalb geschieht dies.

http://jsbin.com/AzICaQes/5

@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.66666666666666%;
}
.col-sm-10 {
  width: 83.33333333333334%;
}
.col-sm-9 {
  width: 75%;
}
.col-sm-8 {
  width: 66.66666666666666%;
}
.col-sm-7 {
  width: 58.333333333333336%;
}
.col-sm-6 {
  width: 50%;
}
.col-sm-5 {
  width: 41.66666666666667%;
}
.col-sm-4 {
  width: 33.33333333333333%;
 }
 .col-sm-3 {
   width: 25%;
 }
 .col-sm-2 {
   width: 16.666666666666664%;
 }
 .col-sm-1 {
  width: 8.333333333333332%;
 }

  }
66
Christina

Eigentlich müssen Sie nur Folgendes hinzufügen (zu user.css):

@media print {

  @page {                
    size: A4;
    margin: 0mm;
  }

  html, body {
    width: 1024px;
  }

  body {
    margin: 0 auto;
  }
}

Wenn Sie gerade dabei sind, sollten Sie alle diese Einstellungen für Bootstrap 3 verwenden

@media print {

  @page {                
    size: A4;
    margin: 0mm;
  }

  html, body {
    width: 1024px;
  }

  body {
    margin: 0 auto;
    line-height: 1em;
    Word-spacing:1px;
    letter-spacing:0.2px;
    font: 14px "Times New Roman", Times, serif;
    background:white;
    color:black;
    width: 100%;
    float: none;
  }

  /* avoid page-breaks inside a listingContainer*/
  .listingContainer{
    page-break-inside: avoid;
  }

  h1 {
    font: 28px "Times New Roman", Times, serif;
  }

  h2 {
    font: 24px "Times New Roman", Times, serif;
  }

  h3 {
    font: 20px "Times New Roman", Times, serif;
  }

  /* Improve colour contrast of links */
  a:link, a:visited {
    color: #781351
  }

  /* URL */
  a:link, a:visited {
    background: transparent;
    color:#333;
    text-decoration:none;
  }

  a[href]:after {
    content: "" !important;
  }

  a[href^="http://"] {
    color:#000;
  }

  #header {
    height:75px;
    font-size: 24pt;
    color:black
  }
}
6

Für diejenigen, die Bootstrap-Mixins verwenden, um solche Spalten zu erstellen (sass-Version): 

@include make-sm-column(3, 0);

es reicht nicht aus, die Stile für Spaltenklassen wie von Christina vorgeschlagen zu überschreiben. Die einzige einfache Lösung, die ich gefunden habe, war, $ screen-sm in _variables.scss in 595px zu ändern und bootstrap.css neu zu kompilieren

So finden Sie diesen Code in _variables.scss:

$screen-sm:                  768px !default;
$screen-sm-min:              $screen-sm !default;

und ändere es dazu:

// decrease min-width to fix print layout issue
$screen-sm:                  595px !default; 
$screen-sm-min:              $screen-sm !default;

dann in deiner _print.scss 

@page {
  size: A4;
  margin: 0;
}
@media print {

  html, body {
    width: 768px;
  }
  body {
    margin: 0 auto;
  }

  // .. your custom styles for print layout

}
2
Konst_

Ich hatte das ähnliche Problem. Am Ende ersetzte ich alle col-md- * durch col-xs- * und es funktionierte wie ein Zauber. Hier ist der Beispielcode

<div class="container make-border" id="obaidrehman07">
  <div class="row make-border">
    <div class="col-md-9 text-center main-title col-md-offset-1">
      <h4 class="heading-white"><strong>CONTRACT ACTION REPORT</strong></h4>
    </div>
    <div class="col-md-0 pull-right"> <img class="img-responsive" src="<?=$base_url;?>assets/office_home/target/dd46a999e4f329f98e5b8df60e21e9ab.png" alt="" style="max-width: 110px;" /> </div>
  </div>
</div>

konvertiert zu 

<div class="container make-border" id="obaidrehman07">
  <div class="row make-border">
    <div class="col-xs-9 text-center main-title col-xs-offset-1">
      <h4 class="heading-white"><strong>CONTRACT ACTION REPORT</strong></h4>
    </div>
    <div class="col-xs-0 pull-right"> <img class="img-responsive" src="<?=$base_url;?>assets/office_home/target/dd46a999e4f329f98e5b8df60e21e9ab.png" alt="" style="max-width: 110px;" /> </div>
  </div>
</div>
1
casper123

Fügen Sie diesen CSS-Stil in Ihrer Datei print.css hinzu 

    @page {
    size: A4;
    margin: 40px;
}


    @media print {
    html,
    body {
        width: 210mm;
        height: 297mm;
    }
    @-moz-document url-prefix() {}
    .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,
    .col-md-1,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-md-10,
    .col-md-11,
    .col-smdm-12 {
        float: left;
    }
    .col-sm-12,
    .col-md-12 {
        width: 100%;
    }
    .col-sm-11,
    .col-md-11 {
        width: 91.66666667%;
    }
    .col-sm-10,
    .col-md-10 {
        width: 83.33333333%;
    }
    .col-sm-9,
    .col-md-9 {
        width: 75%;
    }
    .col-sm-8,
    .col-md-8 {
        width: 66.66666667%;
    }
    .col-sm-7,
    .col-md-7 {
        width: 58.33333333%;
    }
    .col-sm-6,
    .col-md-6 {
        width: 50%;
    }
    .col-sm-5,
    .col-md-5 {
        width: 41.66666667%;
    }
    .col-sm-4,
    .col-md-4 {
        width: 33.33333333%;
    }
    .col-sm-3,
    .col-md-3 {
        width: 25%;
    }
    .col-sm-2,
    .col-md-2 {
        width: 16.66666667%;
    }
    .col-sm-1,
    .col-md-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%;
    }
    .visible-xs {
        display: none !important;
    }
    .hidden-xs {
        display: block !important;
    }
    table.hidden-xs {
        display: table;
    }
    tr.hidden-xs {
        display: table-row !important;
    }
    th.hidden-xs,
    td.hidden-xs {
        display: table-cell !important;
    }
    .hidden-xs.hidden-print {
        display: none !important;
    }
    .hidden-sm {
        display: none !important;
    }
    .visible-sm {
        display: block !important;
    }
    table.visible-sm {
        display: table;
    }
    tr.visible-sm {
        display: table-row !important;
    }
    th.visible-sm,
    td.visible-sm {
        display: table-cell !important;
    }
}
0
Rahul Soni