最初我想在bootstrap 4中进行这种布局,但现在我几乎可以肯定,如果不使用一些技巧,比如将内容加倍,然后将其隐藏到移动/桌面或使用javaScript,这是不可能的。
对于桌面:
+---+---+
| 1 | |
+---+ +
| 3 | |
+---+ 2 +
| 4 | |
+---+ +
| 5 | |
+--+----+
对于智能手机:
+---+
| 1 |
+---+
| 3 |
+---+
| 2 |
+---+
| 4 |
+---+
| 5 |
+---+
Bootstrap 4面临的主要问题是列的高度相等,我不知道该怎么办。当然,我可以在两个嵌套列中进行,但我无法按照自己的意愿重新排列顺序。
在bootstrap 3中,我可以像示例#9中这样做:https://www.bootply.com/siUcTuNhUy但是如何在bootstrap 4中做到这一点呢?
请告诉我遗漏了什么。
不确定Bootstrap中的替代方案,但这可以使用CSS网格来完成。
你可以在这里找到解决方案的代码笔-https://codepen.io/vishwaovi/pen/RqKaMv?editors=1100
所涉及的步骤:
1.将包含元素的父对象定义为网格
HTML
<div class="main">
<div class="section section1"> 1 </div>
<div class="section section2"> 2 </div>
<div class="section section3"> 3 </div>
<div class="section section4"> 4 </div>
<div class="section section5"> 5 </div>
</div>
CSS
.main {
display:grid;
grid-template-columns: 1fr 1fr; // defining a two column grid
}
2.制作第2节,从第2列开始,横跨4行
.section2{
grid-column: 2;
grid-row: span 4;
}
3.移动视图:将网格更改为列,并使section2从第1列和第3行开始
@media (max-width:800px){
.main{
grid-template-columns: 1fr;
}
.section2{
grid-column: 1;
grid-row: 3 /span 1;
}
}
也许这很有用。
为了满足您对智能手机布局的要求,我使用了flexbox(带Bootstrap 4网格(:
.grid .stacked {
width: 48%
}
.grid .section {
background: #069;
margin: 5px auto;
text-align: center;
color: #fff;
WIDTH: 100%;
}
@media (max-width: 575px) {
.grid .stacked {
width: 100%
}
.stacked .section:nth-child(1) {
order: 1;
}
.stacked .section:nth-child(2) {
background: #c00;
order: 3;
}
.stacked .section:nth-child(3) {
order: 2;
}
.stacked .section:nth-child(4) {
order: 4;
}
.stacked .section:nth-child(5) {
order: 5;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container">
<div class="grid d-flex flex-wrap">
<div class="stacked d-flex flex-column">
<div class="section col-xs-12">1</div>
<div class="section col-xs-12 d-block d-sm-none">2</div>
<div class="section col-xs-12">3</div>
<div class="section col-xs-12">4</div>
<div class="section col-xs-12">5</div>
</div>
<div class="section col-xs-12 col-sm-6 d-none d-sm-block">2</div>
</div>
</div>