我尝试使用 Bootstrap 制作带有右列的布局。但是,我不知道该怎么做才能有这样的性格。
我尝试了不同的方法,但右栏的内容大小不如左栏。我在 Bootstrap 3。 这是已经尝试过的方法,但您是否可以看到右列没有 3 个左侧内容的高度。 bootply
你能帮帮我吗?
最佳答案
您可以使用 bootstrap rows/cols 来完成,并在顶部添加 flexbox。如果您使用 bootstrap 4,则可以单独使用 bootstrap 来执行此操作,因为它使用 flex
而不是行/列的 float 。
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
.flex {
display: flex;
}
.wrap {
flex-wrap: wrap;
}
.red {
background: red;
}
.blue {
background: blue;
}
.yellow {
background: yellow;
}
.green {
background: green;
}
</style>
<div class="container">
<div class="row flex">
<div class="col-xs-8">
<div class="row flex wrap">
<div class="col-xs-6 red">1</div>
<div class="col-xs-6 yellow">2</div>
<div class="col-xs-12 blue">3</div>
</div>
</div>
<div class="col-xs-4 green">4</div>
</div>
</div>
关于html - Bootstrap 右栏动态高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44853584/