Wie werden die linken und rechten Ränder in 966 Gitter loswerden?

Wenn die Größe des Darstellungsbereichs 784 x 741 beträgt, wird ein linker und rechter Rand auf die Box angewendet, die ich entfernen möchte. Ich weiß, wie man den "weißen Raum" oben los wird, aber es ist der "weiße Raum an den Seiten, den ich nicht loswerden kann. Weiß jemand, wie man den Leerraum eliminiert, so dass der Header die volle Breite ausdehnt Mein codepen des Browsers Ansichtsfenster? ist unten.Wie werden die linken und rechten Ränder in 966 Gitter loswerden?

codepen

<div class="container"> 
    <div class="grid_12"> 
     <header> 
      <nav> 
       <ul> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">About</a><li> 
        <li><a href="#">Contact</a></li> 
       </ul> 
      </nav> 
      <h1>ALIEN</h1> 
     </header> 
    </div> 
</div>

Quelle

2016-05-25 Gusatvo Pacheco

Verwenden Sie kein 996 für das dann. Der ganze Punkt des Gitters 996 (und 960) besteht darin, einen Container mit einer maximalen Breite von 996 Pixeln zu erstellen. – Quantastical

Also gibt es wirklich keine Möglichkeit, das zu beseitigen, wenn das Browserfenster neu sortiert wird? Ich verstehe, wenn das Ansichtsfenster ganz offen ist, ich hatte gehofft, dass wenn die Ansichtsfenster kleiner ist, ich die Ränder auf der Seite loswerden könnte. Welchen anderen Rahmen würdest du empfehlen? Ich wollte 996 lernen, weil es eine hervorragende Browserunterstützung bietet. –

Sie können jedes CSS in Ihrem 996-Raster überschreiben, das Sie möchten. Das ist die Schönheit von CSS. Alles was ich vorschlage ist, dass, wenn Ihr Header sowieso nur eine große Spalte ist, warum sollten Spaltenstile darauf angewendet werden? – Quantastical

Wenn Sie den schnellsten Weg suchen den Header volle Breite des Bildschirms zu machen, müssen Sie eine andere Klasse zu zwei divs hinzufügen (nennen wir es ‚voller Breite‘ zum Beispiel). Das Ergebnis sollte wie folgt sein:

Html

<div class="container full-width"> 
    <div class="grid_12 full-width"> 
    <!-- another code --> 
    </div> 
</div>

Css

.full-width { 
    width: 100% !important; 
    margin-left: 0 !important; 
    margin-right: 0 !important; 
    padding-left: 0 !important; 
    padding-right: 0 !important; 
}

Diese Klasse wird alle Polsterungen/Margen und setzen Breite auf 100% zurückgesetzt für jedes (oder fast jedes) Element mit dieser Klasse. Danach bleiben kleine Ränder (8px) übrig, dies sind Ränder von body Element. Wenn Sie zu um sie los bekommen möchten, geben Sie einfach in Ihrem CSS-Code:

body { 
    margin-left: 0; 
    margin-right: 0; 
}

Dies ist der schnelle Weg, die nicht eine andere CSS viel brechen müssen.Aber wenn Sie sich fragen, welche Eigenschaften geändert werden sollte (Sie können sie manuell anstelle der Zugabe ändern unsere ‚voller Breite‘ Klasse), einen Blick:

können Sie die Linien ändern 105 und 106 , 221 und 222 zu

margin-left: 0; 
margin-right: 0;

Sie müssen auch Polsterungen auf den Leitungen und

zurücksetzen

Vergessen Sie nicht, width: 100% !important; auf container und grid_12div s einzustellen! Um die verbleibenden CSS nicht zu unterbrechen, fügen Sie neue Klassen oder IDs hinzu.

Quelle

2016-05-26 02:15:59

Das sieht perfekt aus. Vielen Dank. –

Es sieht aus wie die Ränder für jede Medienabfrage auf einen beliebigen Wert Sie wollen (oder durch das Hinzufügen margin: 0; Eigenschaft löschen) ändern können. Wenn Sie die Ränder für alle Elemente löschen möchten, wenden Sie einfach * {margin: 0;} irgendwo an der Spitze Ihrer CSS (nur für den Fall, lassen Sie mich daran erinnern, dass die * wählt alle Elemente aus).

Sie können auch margin-top, margin-right, margin-bottom und margin-left Eigenschaften separat ändern. Wählen Sie eine beliebige Medienabfrage aus und überschreiben Sie die margin-Eigenschaft dafür. Wenn dies das Problem nicht wie gewünscht löst, müssen Sie dies lösen, indem Sie Position und Breite der Elemente ändern.

Quelle

2016-05-25 22:52:11

Okay. Ich gucke mal. Es gibt jedoch eine Menge CSS, die genau wissen, welche Margen ich ändern sollte? Ich habe das Gefühl, es wird das sein. Grid_xx. Und danke für die Hilfe. –

Ich schicke Ihnen bald die vollständige Antwort. –

Okay. Ich habe eine Weile am Netz geübt und habe es noch nicht herausgefunden. –

Wie werden die linken und rechten Ränder in 966 Gitter loswerden?

Antwort

Verwandte Themen