wake-up-neo.net

Das Bootstrap 3-Gitter von Twitter, das den Haltepunkt ändert und die Auffüllung entfernt

Ich versuche, zum neuen boostrap 3-Netz zu wechseln, und habe einige Schwierigkeiten.

  1. Wie soll das Raster unter 480px gestapelt werden, aber nicht zwischen 480px und 768px?
  2. oberhalb von 768px befinden sich die Polsterung links vom ersten und die Polsterung rechts vom letzten Container außerhalb des Containers, aber unterhalb von 768px befindet sich die Polsterung innerhalb des Containers. Das Aussehen ist also anders, da der Inhalt nicht mehr mit einem Container ausgerichtet ist, der darüber liegen könnte.
  3. wenn der raster stapel bleibt die padding aber für mich sollte es auf 0 stehen.

Jede Hilfe wäre willkommen, ich benutze den 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>
csstwitter-bootstrapresponsive-designlesstwitter-bootstrap-3
9
fred_

update jan 2014

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

update 21 aug 2013 Seit Twitter Bootstrap 3 RC2 wurde die unten genannte Spalte * in xs-col - * .__ umbenannt. Es gibt jetzt vier Gitterklassen: xs-col- * (mobile, niemals Stapel), col-sm- * (Tablette, Stapel unter 768px), col-md- * (Laptops, Stapel unter 992 px) und col-lg- * (Desktop, Stapel unter 1200px).

updateIn meiner vorherigen Antwort verwende ich diese Tabelle aus den letzten Dokumenten:

[altes Bild entfernt]

Wenn ich diese Werte teste, wenn etwas anderes gefunden wurde: </ strike>

Bootstrap 3 Grid

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

In variables.less finden Sie:

// 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;

Es scheint jedoch keinen Haltepunkt bei 480px zu geben (oder als @fred_ besagt, dass das Raster die Col-ts- * - (winzige bis kleine) Klasse von Klassen enthält). Siehe auch: https://github.com/twbs/bootstrap/issues/9746

Um den Stapelpunkt auf 480px zu setzen, müssen Sie Ihre CSS erneut kompilieren. @ Screen-small auf 480px setzen; und definieren Sie Ihre Spalten mit: <div style="background-color: red" class="col-sm-4"> danach. Beachten Sie, dass sich der @ grid-float-Haltepunkt ändert, da er als @grid-float-breakpoint: @screen-tablet; definiert ist.

Beim Hinzufügen einer Zeile zum Container habe ich keine Probleme mit dem Auffüllen.

Oder probieren Sie: http://www.bootply.com/70212 es wird unter 480px gestapelt, indem Sie eine Medienabfrage hinzufügen (das Javascript wird nur zur Illustration verwendet)

vorherige Antwort

Von nun an definiert der Bootstrap von Twitter drei Raster: kleines Raster für Telefone (<480px), kleines Raster für Tablets (<768px) und mittelgroßes Raster für Destkops (> 768px). Die Zeilenklassenpräfixe für dieses Raster sind ".col-", ".col-sm-" und ".col-lg-". Das mittelgroße Gitter wird unter 768 Pixel Bildschirmbreite gestapelt. Das kleine Raster unterhalb von 480 Pixeln und das winzige Raster stapelt sich nicht.

Mit Ihrem "col-4" -Präfix wird das Raster nie gestapelt. Entfernen Sie also "col-4", damit Ihr Raster unter dem 480px-Stapel liegt. Dadurch werden jetzt auch Auffüllstapel entfernt.

Siehe auch: http://bassjobsen.weblogs.fm/migrate-your-templates-from-Twitter-bootstrap-2-x-to-Twitter-bootstrap-3/ und ///Schreiben von Twitter-Bootstrap mit Aktualisierung auf v3 im Hinterkopf

16
Bass Jobsen

  1. Verwenden Sie die Klasse .col-ts-12 für alle 100% divs unter 480px und setzen Sie diesen Code am Ende von bootstrap.css ein:

    @media (max-width: 480px) { 
    .col-ts-12 { float: none; }
}
4
otopic

Um Änderungen für kleine bis kleine Geräte zu implementieren, müssen Sie Ihre eigenen Medienabfragen hinzufügen, um Ihre eigenen zusätzlichen Haltepunkte hinzuzufügen.

Zum Beispiel:

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

Ich bin nicht ganz sicher, was Sie damit erreichen möchten, aber so würden Sie Stile anwenden, deren Bildschirmbreite unter 480px liegt.

0
Daniel West