Ich habe Bootstrap 4 heruntergeladen, set $enable-flex true und neu kompiliert.
Ich habe eine Frage zu Bootstrap 4 und Flexbox.
Wenn Sie die Größe der Twitter-Homepage reduzieren, werden Siekann sehen, dass "Who to follow" Teil von rechts nach links der Seite bewegt (aber Main Feed wird davon nicht beeinflusst), und das ist die Sache, die ich mit Bootstrap 4 und Flexbox machen möchte. wenn ich das Fenster verkleinere (für eine hypothetische Größe wie sm), #right wird danach beginnen #left. #middle ist der Zufuhrabschnitt.
Wie kann ich es tun?
Hier ist meine aktuelle Einstellung.
#left {
background: yellow;
}
#middle {
background: brown;
}
#right {
background: #a8d6fe;
}<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-2" id="left">
<div class="col-md-12">PROFILE</div>
<div class="col-md-12" id="menu">MENU</div>
</div>
<div class="col-sm-9 col-md-7" id="middle">NEWS</div>
<div class="col-sm-3 col-md-3" id="right">RIGHT PART</div>
</div>
</div>Antworten:
0 für die Antwort № 1Sieht so aus als würdest du ein Div mit brauchen col- als Wrapper, um die Flex-Artikel zu bestellen. Was sinnvoll ist, denn nur die Flex-Artikel können bestellt werden. Nicht der Flex-Container.
@import url("https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css");
[class*="col-"] {
display: flex;
flex-flow: row wrap;
}
#left{
background:yellow;
}
#middle {
background:brown;
order: 1;
}
#right {
background:#a8d6fe;
}<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-3 col-md-2" id="left">
<div class="col-md-12">PROFILE</div>
<div class="col-md-12" id="menu">MENU</div>
</div>
<div class="col-sm-9 col-md-7" id="middle">NEWS</div>
<div class="col-sm-3 col-md-3" id="right">RIGHT PART</div>
</div>
</div>
</div>