Ändern Sie das bootstrap grid, wenn das Fenster skaliert

mein problem ist Folgendes, ich versuche eine schöne große Rechteck in der Mitte meiner Webseite,
aber ich kann nicht verwaltet werden die Räume von der Seite des Rechtecks, wenn ich die Größe des Fensters.
Wenn ich den 

<div class=" col-md-12">...</div>

Bekomme ich zu wenig Polsterung, als ich wollen, während die Fenster im Vollbildmodus ist,
aber feine Polsterung an den Seiten, wenn Sie unter "Telefon-Größe-Bildschirm"
aber wenn ich

 <div class=" col-md-10 col-md-offset-1">...</div>

Es ist in Ordnung, Polsterung in VOLL-BILDSCHIRM, aber das div ist zu klein, wenn das Fenster in Handy-Größe.

Was soll ich tun?

Gibt es eine Möglichkeit, kombinieren diese zwei?

InformationsquelleAutor Doron | 2014-10-11
  1. 2

    Haben Sie auch Lesen Sie in der Dokumentation von Bootstrap?

    http://getbootstrap.com/css/#grid

    Bootstrap ist dafür ausgelegt, jedoch müssen Sie auf Ihre Klassen. MD steht für die mittlere Gerät ... Sie haben auch sm, das ist das Telefon. Also, wenn Sie wollen, 10 Spalten auf einem Handy, machen Sie Ihre Klasse wie folgt.

    <div class="col-md-12 col-sm-10 col-sm-offset-1">...</div>

    wenn dies nicht immer Sie dort (in der sm-Bereich ist zwischen 991 Pixel bis 768px), verwenden Sie das XS Klasse.

    <div class="col-md-12 col-xs-10 col-xs-offset-1">...</div>

    Beeinflusst, die Geräte mit einer Auflösung von 767 Pixel oder weniger.

    Also um auf Ihre Frage zurückzukommen: sind Sie miteinander kombinierbar? Ja, Sie sind

    Die Kombination von sets, die Sie machen können, kann man sich von der 1 Klasse an.. ich weiß nicht wie viele, weil bootstrap wird die Klasse auswählen, die es braucht, abhängig von der Größe des Bildschirms. So können Sie auch Klassen, wie es sich Verhalten soll, auf großen Bildschirmen (col-lg) zu supersmall (col-xs). Ich Verweise Sie weiter, um die Dokumentation mit Beispielen auf der bootstrap-website.

    Glücklich HTML ' Ing!

    InformationsquelleAutor Dorvalla
  2. 1

    .col-md-12 mit keine anderen Klassen ist die volle Breite auf alle viewport-Größen. Um die padding und margin arbeiten korrekt funktioniert, müssen Sie eine .row um ihn herum, so dass die Polsterung der Spalte Klasse wird eingestellt, indem die umliegenden .row (mit negativen L-und R-Rand) und dann außerhalb, dass Sie entweder die .container oder .container-fluid Klasse zu verhindern, dass der horizontale Scrollbalken.

    ALLERDINGS, wenn dieses "Großes Rechteck" ist voller Breite die ganze Zeit, wie es ist mit .col-md-12 Sie absolut nicht benötigen Verwendung jede grid-Klassen. Wenn Sie möchten, dass es innerhalb der max-Breite der .container ist, setzen Sie es direkt in dem .container ohne umgebenden grid-Klassen, oder Sie können es in einem .container-fluid zu bekommen, die Links und rechts 15px (Standardeinstellung), oder legen Sie Sie im inneren nichts (lassen Sie es alle von sich selbst) und auf die Kanten des Viewports ohne Polsterung/Gosse.

    Wenn Sie keine grid-Klassen können Sie machen Sie Ihre Rechteck eine prozentuale Breite mit max-width (wenn Sie Wunsch) und legen Sie die Klasse .center-block

    InformationsquelleAutor Christina
Schreibe einen Kommentar