Der Inhalt des BootStrap 5-Containers reicht beim Drucken nicht in voller Breite aus ⇐ JavaScript

[Anonymous]

Ich habe beim Drucken einer Seite Probleme mit dem BootStrap-Layoutsystem.

Angenommen, es gibt eine Schaltfläche

• Code: Select all

  Drukuj

Damit kann ich ein Fenster drucken und die Informationen müssen die gesamte Seitenbreite einnehmen (ich möchte, dass die Leute DSGVO-Inhalte für sich einfach ausdrucken können verwenden). Ich möchte auch vermeiden, Dateien von meiner Seite herunterzuladen.

Ich habe jedoch eine statische Webseite ohne URLs entwickelt, indem ich Tab-Pane--Klassen verwendet habe, die einfach statische ID-Inhalte umschalten, wenn auf den Navigationsleisten-Tab geklickt wird:

Code: Select all

[list]
[*]
[url=#home-page]
[img]logo-blank.png[/img]
[/url]

[*]
[url=#lawyers-page]Prawnicy[/url]

[*]
[url=#services-page]Usługi[/url]

[*]
[url=#contact-page]Kontakt[/url]

[*]
[url=#rodo-page]Polityka prywatności[/url]

[/list]




Informacja RODO
Drukuj

Szczegółowe informacje dotyczące przetwarzania danych osobowych klientów kancelarii
[list]
[*]
Administrator danych osobowych
Administratorem Pani/Pana danych osobowych będzie ...
prowadząca ... z siedzibą w ...
przy .... Może Pani/Pan  się z nami skontaktować w następujący sposób:
[list]
listownie na adres: ...
[*]telefonicznie: ... lub ...
[/list]

[/list]

Das Problem ist: BootStrap verwendet einen speziellen Stil für Container (die einen Rand und ein Polster haben, damit der Inhalt gut zentriert werden kann).
Diese nützliche Funktion stört jedoch mein Drucken, da sie das gesamte Fenster umfasst:

[*]Sehr zentriertes Drucken.
< /ul>
Wie kann ich CSS verwenden, um Artikelinhalte ohne Auffüllung und Rand des BootStrap-Containers auszudrucken?
Mein HTML-Kopf:

Code: Select all

Sample title

Ich bin nicht so gut in CSS, aber das habe ich bisher geschafft:

Code: Select all

/*-----------My problem----------------*/
@media print {
body {
visibility: hidden;
display: contents;
}
#navbar, footer {
display: none;
}
#rodo-page {
margin: 0 0 0 0 !important;
padding: 0 0 0 0 !important;
width: 100% !important;
visibility: visible;
text-align: left;
}
}
/*-------------------------------------*/
/* Obviously I have more CSS, such as: */
#content {
background-color: lightgrey;
border: solid;
border-color: dimgrey;
}

.tab-pane .display-4 {
text-align: center;
margin-bottom: 1em;
}
.tab-pane p, .tab-pane ul{
font-size: larger;
}

body{
background-image: linear-gradient(#006241,#32913a);
background-attachment: fixed;
}

Code: Select all

!importantDas Schlüsselwort 

scheint nicht zu funktionieren. Ich habe es geschafft, den gesamten Text nach oben zu verschieben, aber der Text ist immer noch horizontal zentriert.
top: 0 mit left:0 hat auch nicht funktioniert.
Der Wechsel von Container zu Container-Fluid ist auch nichts für mich: Es geht nur um das Druckverhalten.

Irgendwelche Ratschläge?