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:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Debugger</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link href="test.css" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="col-xs-12">
<div style="background:black;" class=" col-xs-12 col-sm-6 col-lg-4">
<p>eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, ali
eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae,
eleifend ac, enim. Aliquam lorem ante, dapibus </p></div>
<div style="background:red;" class=" col-xs-12 col-sm-6 col-lg-4">
<p>end tellus. Aenean leo ligula, porttitor eu, consequat vitae,
eleifend ac, enim. Aliquam lorem ante, dapibus </p></div>
<div style="background:green;" class=" col-xs-12 col-sm-6 col-lg-4">
<p>eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede m felis eu pede mollis p
mper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae,
eleifend ac, enim. Aliquam lorem ante, dapibus</p></div>
<div style="background:yellow;" class=" col-xs-12 col-sm-6 col-lg-4">
<p> vitae, justo. Nullam dictum felis eu pede mollis p
mper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae,
eleifend ac, enim. Aliquam lorem ante, dapibus </p></div>
</div>
</div>
</div>
</body>
</html>
Alles anzeigen
.wrapper{
padding:0px;
margin:10px 5px 20px 5px;
}
.container{
padding:15px;
border: 1px solid #ffffff;
background-color: #eeeeee;
-webkit-box-shadow: 0px 0px 12px -6px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 12px -6px rgba(0,0,0,1);
box-shadow: 0px 0px 12px -6px rgba(0,0,0,1);}
Alles anzeigen
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