我可以动态更改页面布局以适应窗口大小吗?

问题描述

我有这样的网站，其中包含行和列(col-xs，col-sm，...用于各种介质大小):

I have my website like this, with rows and cols (col-xs, col-sm, ... for the various media sizes):

但是，当浏览器水平缩小(或由于屏幕狭窄)时，结果是这样，可怜的小猫也被压碎了:

However when the browser gets reduced horizontally (or because the screen is narrow) the result is like this and poor kitty gets crushed:

当窗口缩小得太小以至于以前的布局不再有意义时，是否有引导程序可以使布局发生根本性的变化?可以将第一个布局变成这样的东西:

Is there a way with bootstrap to make the layout change radically when the window gets too reduced that the previous layout makes no sense anymore? Something that would turn the first layout into this:

谢谢！

推荐答案

是否可以将其合并到Bootstrap中，我不知道，但是flexbox可以做到这一点.

Whether this can be incorporated into Bootstrap I do not know but flexbox can do that.

Codepen演示

.container {
  width: 300px;
  height: 300px;
  border: 1px solid grey;
  margin: 25px auto;
  display: flex;
}
.col {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  color: orange;
  text-align: center;
  order: 1;
}
.box {
  flex: 1 0 auto;
  background: #000;
  margin: 10px;
}
@media screen and (max-width: 760px) {
  .container {
    flex-direction: column;
  }
  .col:nth-child(2) {
    order: -1
  }
  .col:nth-child(1) {
    flex-direction: row;
  }
}

<div class="container">
  <div class="col">
    <div class="box">1</div>
    <div class="box">2</div>
  </div>

  <div class="col">
    <div class="box">3</div>
  </div>
</div>

这篇关于我可以动态更改页面布局以适应窗口大小吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！