So zentrieren/fügen Sie dem Bootstraps-Raster Ränder hinzu?

-1

bekam ich einen PSD Design, bei dem das Gitter wie folgt aussieht - Grid image das Bild nur Teile der PSD zeigt, weil ich besitze die Rechte nicht in der Öffentlichkeit zu veröffentlichen. Aber wie Sie sehen können, verläuft das Gitter (blaue Streifen) nicht von Seite zu Seite wie das Boostrap-Gitter. Es beginnt 120px in und endet 120px vor dem Bildschirm (Sprechen über die insgesamt 12 Spalten, nicht jede Spalte)So zentrieren/fügen Sie dem Bootstraps-Raster Ränder hinzu?

Ich benutze Bootstrap beim Codieren dieser PSD, und Bootstraps Grid geht von der einen Seite auf die andere.

Meine Frage: Wie kann ich das Bootstrap-Grid ändern (Mitte/Ränder hinzufügen), so sieht es genauso aus wie das Gitter in der PSD, d. H. Startet 120px auf dem Bildschirm und 120px fertig, bevor der Bildschirm endet?

ich nicht alle Inhalte außerhalb des Gitters haben müssen, wie es in der PSD ist. Ich müsste also Zeilen von Seite zu Seite gehen, aber die Spalten ein wenig hinein starten und ein bisschen vor dem Bildschirm fertigstellen. Ich kann den Bootstrap-Container nicht anstelle von Container-Fluid verwenden, da er auch die Reihen übernimmt. Ich kann Offset auch nicht verwenden, da ich dann einige der Spalten "verliere" und nicht mehr 12 Spalten pro Zeile zur Verfügung habe.

Meine HTML-Datei enthält eines Standard-Fluid Grid

<div class="container-fluid> 
    <div class="row"> 
    <!-- A few columns in different sizes --> 
    </div> 
    <div class="row"> 
    <!-- A few columns in different sizes --> 
    </div> 
    <div class="row"> 
    <!-- A few columns in different sizes --> 
    </div> 
</div>

Quelle

2016-04-08 Tobias Bredenberg

Sie benötigen eine html sein, eine der Rasterelemente soll – 4castle

Ist jedes der 12 blauen Streifen zu schreiben? – BSMP

BSMP Richtig :) –

Fügen Sie zu Ihrem css

.row{padding: 0 120px;}

Quelle

2016-04-08 21:06:13

Sie können das um 15 reduzieren, um die Auffüllung bereits in den Spalten zu kompensieren, wenn Sie das brauchen. Ich bin nicht sicher, wie Sie Ihr Layout zu fließen brauchen. –

lol, ich kann nicht glauben, dass ich das verpasst habe! Danke vielmals! –

Dies funktioniert aber Vorbehalt es sollte nur für äußere Reihen verwendet werden: '.container-Flüssigkeit> .row {Padding: 0 120px;}'. Außerdem erzeugt es auf mobilen Bildschirmen einen großen Außenabstand, der für eine Reaktionsfähigkeit nicht ideal ist. http://codeply.com/view/ynHJCDDqUd?viewport=xs – ZimSystem

Ich bin mir nicht sicher, ob ich völlig verstehe Ihre Frage, aber Sie können Folgendes versuchen:

einen Container hinzufügen (Bootstrap container)
Marge mit CSS hinzufügen: .col-sm-4 {margin:Your margin here;}

Quelle

2016-04-08 20:38:48

Siehe Kommentare oben :) –

Es hängt wirklich davon ab, welcher andere Inhalt innerhalb der Reihen sein wird? Wenn die Spalten von einer Seite gehen müssen, um die Seite nicht, warum nicht nur verwenden Bootstrap .container? Sie können nach wie vor außerhalb des container volle Breite Inhalt haben ..

http://codeply.com/go/HwIDGQpdbO

Quelle

2016-04-08 21:08:12 ZimSystem

So zentrieren/fügen Sie dem Bootstraps-Raster Ränder hinzu?

Antwort

Verwandte Themen