html - Bootstrap 优先考虑垂直堆叠

Question

我想问一下，如果不使用 Javascript 或 JQuery，是否可以在 Bootstrap 上实现这种列堆叠。

This One 而不是 This .

我用过

col-md-6

目前要为我的列设置样式，但是我无法弄清楚如何确定堆叠的优先级以首先填充垂直空间，直到它到达父

的末端(高度)，然后填充向下的相邻水平空间，等等。

我在 Google 的任何地方都找不到关于此的任何主题。所以，我来这里是为了看看它是否真的可能。

谢谢。

最佳答案

是的，这是可能的。但是你需要两个包装器。一个用于 1 ~ 4 秒，用于 5 和 6。

jQuery 仅用于演示视口(viewport)更改

$(document).ready(function() {
  $('button').click(function() {
    $('.wrapper').toggleClass('v2')
  });
});

div div div {
  border: 1px solid #ddd;
  text-align: center;
  font-weight: bold;
  float: left;
  padding: 20px 20px;
}
div {
  box-sizing: border-box;
}
.wrapper {
  width: 100px;
  height: 250px;
}
.w-1,
.w-2 {
  width: 50%;
  float: left;
}
.v2 .w-1,
.v2 .w-2 {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="w-1">
    <div class="col-xs-6">1</div>
    <div class="col-xs-6">2</div>
    <div class="col-xs-6">3</div>
    <div class="col-xs-6">4</div>
  </div>
  <div class="w-2">
    <div class="col-xs-6">5</div>
    <div class="col-xs-6">6</div>
  </div>
</div>
<hr/>Only for demo:
<button>Toggle layout</button>

关于html - Bootstrap 优先考虑垂直堆叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38476201/

Answer 1

是的，这是可能的。但是你需要两个包装器。一个用于 1 ~ 4 秒，用于 5 和 6。

jQuery 仅用于演示视口(viewport)更改

$(document).ready(function() {
  $('button').click(function() {
    $('.wrapper').toggleClass('v2')
  });
});

div div div {
  border: 1px solid #ddd;
  text-align: center;
  font-weight: bold;
  float: left;
  padding: 20px 20px;
}
div {
  box-sizing: border-box;
}
.wrapper {
  width: 100px;
  height: 250px;
}
.w-1,
.w-2 {
  width: 50%;
  float: left;
}
.v2 .w-1,
.v2 .w-2 {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="w-1">
    <div class="col-xs-6">1</div>
    <div class="col-xs-6">2</div>
    <div class="col-xs-6">3</div>
    <div class="col-xs-6">4</div>
  </div>
  <div class="w-2">
    <div class="col-xs-6">5</div>
    <div class="col-xs-6">6</div>
  </div>
</div>
<hr/>Only for demo:
<button>Toggle layout</button>