Twitter Bootstrap-3-Gitter, ändern Haltepunkt und Polsterung entfernen

Ich m versuchen, zu bewegen, um die neue boostrap 3-raster, und ich m mit einigen Schwierigkeiten.

  1. Wie haben die das grid-stack unter 480px aber nicht zwischen 480px und 768px?
  2. oben 768px der Abstand Links von der ersten und die Polsterung Recht auf das Letzte sind, das außerhalb des Behälters, aber unterhalb von 768px die Polsterung ist im inneren des Behälters, damit der look ist anders, weil die Inhalte nicht mehr an einen container, der könnte höher sein.
  3. wenn die grid-stack-die Polsterung bleibt aber für mich sollte es sein, bei 0.

Jede Hilfe wäre willkommen, ich m mit dem nachstehenden code mit bootstrap 3 RC1

    <div class="container" style="background-color: purple;">
container

</div>

<div class="container">
    <div class="row">
        <div style="background-color: red" class="col-4 col-sm-4 col-lg-4"><img data-src="holder.js/100%x200"></div>
        <div style="background-color: blue" class="col-4 col-sm-4 col-lg-4"><img data-src="holder.js/100%x200"></div>
        <div style="background-color: green" class="col-4 col-sm-4 col-lg-4"><img data-src="holder.js/100%x200"></div>
    </div>
</div>
  • In der Tat mir ist das Gitter fehlt die col-ts-* (winzig kleine) Menge von Klassen
  • Dies könnte eine option für Sie, wenn Sie mehr Kontrolle benötigen für die 'tiny' - Spalten: gist.github.com/andyl/6360906. Aber @otopic Lösung mit width: 100%; kann gut für die meisten Menschen die Anforderungen für diese zusätzliche/fehlende Spalte Größe/control.
InformationsquelleAutor fred_ | 2013-07-29
  1. 16

    update jan 2014

    Siehe auch: https://github.com/twbs/bootstrap/issues/10203

    update 21 aug 2013
    Da Twitter Bootstrap 3 RC2 col-* unten erwähnt wurde umbenannt in xs-col-*
    Es gibt vier grid-Klassen nun: xs-col-* (mobile, nie stacks), col-sm-* (tablet -, Stapel unterhalb von 768px), col-md-* (laptops,Stapel unten 992 px) und col-lg-* (desktop -, Stapel unten 1200px).

    update
    In meiner vorherigen Antwort, die ich verwenden Sie diese Tabelle aus dem letzten docs:

    [alt-Bild entfernt]

    Wenn ich testen Sie diese Werte, wenn gefunden etwas anderes:

    Twitter Bootstrap-3-Gitter, ändern Haltepunkt und Polsterung entfernen

    • "col-xs-*" wird immer angewendet (nie-stacks)
    • "col-sm-*" wird zwischen 768 und höher (992px) (stacks bei 767)
    • "col-lg-*" wird zwischen 992 und höher (stacks bei 991)

    In Variablen.weniger werden Sie finden:

    //Media queries breakpoints
//--------------------------------------------------

//Tiny screen /phone
@screen-tiny:                480px;
@screen-phone:               @screen-tiny;

//Small screen /tablet
@screen-small:               768px;
@screen-tablet:              @screen-small;

//Medium screen /desktop
@screen-medium:              992px;
@screen-desktop:             @screen-medium;

    Aber es scheint nicht zu einem breakpoint bei 480px (oder wie @fred_ sagt das Netz fehlt die col-ts-* (winzig kleine) Gruppe von Klassen). Siehe auch: https://github.com/twbs/bootstrap/issues/9746

    Um die stacking-Punkt, an 480px Sie neu kompilieren müssen yours css. Set @Bildschirm-kleine bis 480px; und definieren der Spalten mit:
    <div style="background-color: red" class="col-sm-4"> danach.
    Hinweis: dies wird sich ändern @grid-float-breakpoint auch, denn es ist definiert als @grid-float-breakpoint: @screen-tablet;.

    Beim hinzufügen einer Zeile, um die container finde ich nicht Probleme mit Polsterung.

    Oder versuchen: http://www.bootply.com/70212 es wird stack unter 480px durch hinzufügen einer media-query (das javascript dient nur zur Veranschaulichung)

    vorherigen Antwort

    Ab jetzt Twitter Bootstrap definiert drei Netze: Kleine Netz für Handys (<480px), Kleines Netz für Tablets (<768px) und das Mittlere Gitter für die Destkops (>768px). Die Zeile class-Präfixe für diese Gitter werden “.col-", ".col-sm-" und ".col-lg-". Die Medium-large grid-stack unterhalb von 768 Pixel-Bildschirm-Breite. So hat das Kleine raster unten 480 Pixel und dem kleinen Gitter niemals stapeln.

    Mit Ihrem "col-4" - Präfix, das Gitter wird niemals stapeln. So entfernen Sie "col-4", lassen Sie Ihre grid-stack unterhalb der 480px. Dies wird sich auch entfernen die Polsterung Ursache ist der Stapel jetzt.

    Siehe auch: http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/ und Das schreiben von Twitter Bootstrap, mit einem Upgrade auf v3 im Auge

    • Thx Bass, aber es funktioniert. mit col-4 es muss nicht stapeln, ohne col-4 it-start-stacking-ein 768px, ich möchte es starten, stapeln unter 480px und bleiben waagrecht über. Auf meiner Seite ist es nicht entfernen Sie die Polsterung sowie
    • vielen Dank für Ihre Antwort ich werde mal schauen jetzt
    • den Vorschlag von Bass funktioniert bei mir für das stapeln, bitte siehe bootply.com/70143 , beachten Sie auch, wie die Polsterung aussieht, wenn Sie die Farben anwenden, um die gleichen Elemente (also col und col, nicht container-und col).
    • Hallo David, in deinem Beispiel die grid-start stacking auf 768px. Das Ziel ist es, start stacking unter 480px. das ist eine Idee, um eine Zeile innerhalb der top-container auch für die Polsterung. es nicht es zu entfernen, aber es sieht mehr ausgerichtet.
    • Thx Bass, ich will hinzufügen, die col-ts-* um die less-Dateien hinzu, um eine weitere Pause und haben mehr Granularität. deine Lösung mit dem ändern der @ - Bildschirm-klein zu sein scheint, so gut funktioniert 🙂
    InformationsquelleAutor Bass Jobsen
  2. 4

    1. Klasse .col-ts-12 für alle 100% divs unter 480px und diesen code am Ende der bootstrap.css:

      @media (max-width: 480px) { 
    .col-ts-12 { float: none; }
}
    • dies ist ein schöner Haltepunkt, den Sie brauchen, um hinzuzufügen width:100% es aber
    InformationsquelleAutor otopic
  3. 0

    Implementieren änderungen für einen winzigen kleinen Geräte, die Sie benötigen, um Ihre eigenen Medien-Anfragen, um Ihre eigenen zusätzlichen Haltepunkte.

    Beispiel:

    @media (max-width: 480px) { 
   .no-float {
       display:block;
       float:none;
       padding:0;
   }
}

    Ich bin nicht ganz sicher, was Sie versuchen zu erreichen, aber dies ist, wie würden Sie Stile angewendet werden, wo die Bildschirm Breite ist unten 480px.

    InformationsquelleAutor Daniel West
Schreibe einen Kommentar