Booststrap - Grid - Umbruch

  • Hallo,


    ich habe folgende Frage zu Bootstrap, die ich mir über google bzw. youtube leider noch nicht beantworten konnte.


    Was ich möchte:

    • desktop (1200px +) 3 spalten
    • medium (768px bis 992px) 2 spalten
    • small (480px -) 1 spalte

    Alle Spalten sollten die gleiche, maximale höhe haben (display:flex).


    Das Problem:


    Ich bekomme es nicht hin, display:flex einzuarbeiten, dass es für desktop und medium funtkioniert, ich schaffe immer nur eins von beiden.
    Dazu habe ich die frage, wie ich es machen muss, dass bootstrap immer eine neue zeile anfängt, wenn ein umbruch stattfindet.


    Hier ein Foto wie es aktuell ausssieht, wenn ich von desktop zu medium wechsel:



    [Blockierte Grafik: http://250kb.de/u/160625/j/3Jn2t9zK5E8F.jpg
    So sollte bzw. möchte ich es jedoch haben:


    [Blockierte Grafik: http://250kb.de/u/160625/j/Qj44TufCHCvl.jpg
    ich glaube es muss irgendwie mit dem float was zu tun haben, jedoch habe ich nach einigen wilden versuchen keine lösung gefunden.


    Des weiteren wäre es noch ideal, wenn ich die einzelnen spalten auf einheitliche höhe bringen kann. Wie gesagt, weis ich nicht, wie ich display:flex einsetzen muss. wenn ich einen div mit diesem atribut um die einzelnen spalten setze, dann geht dass wie gesagt nur auf einem mediabreakpoint, nicht auf allen. :(


    Hier ein bild wie ich es am ende haben will:


    [Blockierte Grafik: http://250kb.de/u/160625/p/3xPrD1wLUKBe.png]


    [Blockierte Grafik: http://250kb.de/u/160625/j/doDuQdhemXlb.jpg]


    Ich würde mich über Hilfe sehr freuen. Hier mein Code:







    p.s. mit flexbox wüsste ich es dank MrMurphy, aber ich habe die ganze restliche seite jetzt mit bootstrap, und dachte dass müsste doch damit auch gehen. liebe grüße an alle :)

  • Ich würde es mit Media Queries machen und eine min-hight setzen
    etwa so:


  • Das ist glaube nicht ganz die Lösung, dennoch danke.
    Ich habe schon versucht mit margin:9999px und overflow:hidden: zu arbeiten, aber alles Sackgassen, oder falsch umgesetzt.
    Dazu ist das mit dem Float (neue reihe für alle elemente (siehe bild 1) nicht behoben.
    So, ich denke Anfänger wie ich, werden eventuell die gleiche Frage haben. Daher meine aktuelle Lösung für den Zeilenumbruch:






    Jetzt noch das Problem mit dem display:flex. Mal sehen ob ich es schaffe, oder ob jemand eine Hilfe geben kann.

  • Erstmal eine kurze Korrektur deines Quellcodes:


    In Bootstrap wird das responsive Gridsystem immer so aufgebaut



    Die <div class="col"> müssen immer von einem <div class="row"> umschlossen sein.


    Dann hast du dich scheinbar bei der Spaltebreite für large verrechnet.
    Wenn 4 Elemente nebeneinander anzeigen willst, dann muss die Spaltenbreite 12/4 = 3 sein

    Code
    <div style="background:yellow;" class=" col-xs-12 col-sm-6 col-lg-3">



    Dann werden die Boxen für small und large schonmal korrekt angezeigt.


    Jetzt zu deinem Problem.
    Momentan floaten die Elemente nach links, bis sie auf ein Element stroßen, und dann daran hängen bleiben.
    Dadurch bleibt die Grüne Box an der schwarzen Box hängen.
    Dieses Problem kann man mit der css-Eigenschaft clear beseitigen.
    http://codepen.io/Killerbear_02/pen/qNRYBj


    Jede ungerade Box hat die Eigenschaft clear:left, die verhindert, dass sich links von dieser Box ein floatendes Element befindet.


    Eine alternative Möglichkeit wären die besagten flexboxen.
    Dadurch kann man auch erreichen, dass die nebeneinander stehen Boxen gleich hoch sind.
    http://codepen.io/Killerbear_02/pen/ZOLxdG

  • Hallo

    Killerbear,


    vielen Dank für deine Antwort.
    Werde deine Lösung gleich mal genau anschauen.


    So grob habe ich deine Erklärung verstanden, werde die wie gesagt noch in Ruhe nachbauen bzw. anschauen.
    Meine Momentane Lösung mit:

    HTML
    <div class="clearfix visible-md-block"></div>


    funktioniert mit dem "float "problem" ebenfalls, kann man sagen welche "besser" ist, oder führen viele Wege nach Rom und es ist egal? Dein Coe sieht auf jedenfall sauberer und übersichtlicher aus, daher werde ich wohl den auch so benutzen. :)


    So, nun muss ich nur noch die "boxen" auf einheitliche, vertikale Höhe brinen und mit display:flex experimentieren. Oder sollte ich sowas dann mit display:table machen?

    Eine alternative Möglichkeit wären die besagten flexboxen.
    Dadurch kann man auch erreichen, dass die nebeneinander stehen Boxen gleich hoch sind.
    http://codepen.io/Killerbear_02/pen/ZOLxdG

    Kann ich die Boxen über das Bootstrapgrid nicht gleich hoch setzen? Also im Multi-Column Layouts? Ich konnte es bis jetzt wie gesagt nur für eine der Breakpoints erreichen, in dem ich einen div mit display:flex um alles gezogen habe.




    EDIT: Ich sehe gerade, dass dein Beispiel mit Flexbox auch das Bootstrap Grid benutzt, ich dachte dass kann man nicht kombinieren bzw. es sind eben 2 unterschiedliche Wege. Nochmals danke, werde alles nun genau nachvollziehen versuchen. Über weitere Hilfe bzw Tipps und Tricks freue ich mich natürlich sehr.


    Liebe Grüße
    Eine Frage noch zu dem Thema:


    Wie bekomme ich denn das Margin zwischen den div-boxen hin? Wenn ich dass so mache:


    CSS
    @media all and (min-width: 992px) {
      .row div {
    	flex: 1 33.3333%;
    	margin: 5px;
      }
    }


    dann stellt er automatisch von 3 auf 2 spalten um, - wohl weil es zu wenig Platz gibt, da die 3 x 33,333 100% ergeben und der margin dann kein Platz hat.
    Ich würde gerne einen genauen Wert in Pixel benutzen - sonst würde ich z. B: flex: 1 30%; einstellen, dann hätte ich ja 10% Platz für den Abstand. Ich schätze aber, das geht irgendwie auch anders, dass ich pixel benutzen kann? Irgendwas mit "auto"?


    Liebe Grüße.


    GIbt es eigentlich eine Kaffe-Kasse im Forum?


    P.s. wäre es denn okay, wenn ich manche Elemente (einfachere) mit Bootstrap mache - und wieder andere mit Flexboxen? Oder würdet ihr wenn dann alles entweder oder machen? Zwecks "Sauberkeit" und so.

  • Hallo

    Zitat

    Ich schätze aber, das geht irgendwie auch anders, dass ich pixel benutzen kann?


    Richtig.


    Die Lösung ist dir auch schon über den Weg gelaufen. Um verschiedene Einheiten wie % und px kombinieren zu können kennt CSS die Berechnungsmöglichkeit mittels calc.


    Bei einer gewünschten gesamten Breite von 33,333% und einem margin von 5px kann beim CSS folgendes bestimmt werden:


    Code
    flex: 1 calc(33.3333% - 10px);


    10px, da ja links und rechts jeweils 5px sind. Die Leerzeichen vor und hinter dem Berechnungszeichen (hier dem Minus) sind Pflicht. Zwischen calc und der ersten öffnenden Klammer darf hingegen kein Leerzeichen stehen.


    Es gilt Punkt- vor Strichrechnung. Klammern können gesetzt werden.


    Wobei einige Browser mit calc bei Kurzschreibweisen nicht zurechtkommen. Deshalb sollte die lange Schreibweise verwendet werden:


    Code
    flew-grow: 1;
    flex-shrink: 1;
    flex-basis: calc(33.3333% - 10px);


    Zitat

    wäre es denn okay, wenn ich manche Elemente (einfachere) mit Bootstrap mache - und wieder andere mit Flexboxen?


    Ja, das wird von Bootstrap sogar selbst empfohlen. Man sollte halt nur wissen was man tut.


    Gruss


    MrMurphy

  • So, jetzt aber, hier mein finaler code - wo fasst alles geht wie es soll.
    das einzige problem ist, er nimmt den padding vom container nicht an, wohl wegen dieser zeile:


    CSS
    .container-flex > div[class*='col-'] div,.row-flex > div[class*='col-'] div {
    	width:100%;
    }


    könnte mir da jemand noch helfen, dann habe ich 3 tage mission abgeschlossen :) der code ansich ist so hoffentlich auch ordentlich?




  • Hallo, ich hatte einen Denkfehler - die Hintergrundfarbe geht ja auch in den Padding. :)
    Ich habe mich jetzt nochmals mit Flexbox auseinander gesetzt und glaube ich habe mehr oder weniger verstanden.
    Nur ein Problem habe ich noch:


    Wie kann ich dass genau mit dem Margin machen, wenn ich 2 Spalten mit 50% Breite habe? Wie in meinem Lerncode, habe ich zwei Bootstrap col auf 6 setzen wollen, dann ist aber durch den Margin kein Platz mehr und es sprint um. (Ich habe zwar dank euch funktionierende Codes, versuche es aber auch zu verstehen - und das mit dem Margn ist eben noch offen) Hier mein Code:


    p.s. ist mein Reset-Code, den ich kopiert habe gut so, oder gibts da bessere? :)





    p.s. wird mein html code nicht angezeigt, oder liegt es an meinem browser? ?(

  • Wie kann ich dass genau mit dem Margin machen, wenn ich 2 Spalten mit 50% Breite habe? Wie in meinem Lerncode, habe ich zwei Bootstrap col auf 6 setzen wollen, dann ist aber durch den Margin kein Platz mehr und es sprint um. (Ich habe zwar dank euch funktionierende Codes, versuche es aber auch zu verstehen - und das mit dem Margn ist eben noch offen)


    Wenn du flexboxen benutzt, kannst du den cols auch margin vergeben, ohne dass sich das bootstrap grid system verschiebt.
    Wenn du keine flexboxen benutzt (warum auch immer, weil du ja eigentlich diesen Thread eröffnet hast, weil du flexboxen benutzt willst), dann darfst du das margin nicht den bootstrap cols geben sondern einem Kind-Element davon


    HTML
    <div class="row">	<div class="col-md-6"><div class="content">.col-md-6</div></div>	<div class="col-md-6"><div class="content">.col-md-6</div></div></div>


    CSS
    .content{margin: 10px;}



    p.s. ist mein Reset-Code, den ich kopiert habe gut so, oder gibts da bessere? :)


    ich bin benutzen für den css reset immer die normalize.css, die auch von bootstrap empfohlen wird:
    http://getbootstrap.com/css/#overview-normalize



    p.s. wird mein html code nicht angezeigt, oder liegt es an meinem browser?


    wird bei mir auch nicht angezeigt

  • Hallo,


    danke.


    Nunja, ich will es ja schon benutzen, aber zusammen mit Bootstrap eben. Ich dachte,ich kann einfach die columns von bootstrap benutzen und das alles in einem flexbox container. oder mach ich in dem fall die spaltenbreite auch über flexboxx befehle (flex:1 ect.) ?


    hier nochmal der html



    müsste dass so nicht eigentlich funktionieren?



    CSS
    .item{
        	margin: 5px; 
        	flex-shrink: 1;
        	flex-basis: auto;  
        	align-items: stretch;
    	}


    hmm... grübel ?( 8|




    Anhang: Muss ich denn mit Flexbox jedes mal den Margin in die Breitenangabe einberechnen? Also so:


    CSS
    flex: 1 calc(33.3333% - 10px);
      	margin: 5px;


    Geht dass nicht auch irgendwie automatisch? :S

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!