html - 如何模拟引导网格的适应性

Question

我有两个共享父容器的内联 div。为了水平对齐，div 的宽度为 49%。我想做的是在将父容器的大小调整到特定宽度之后。这两个 div 的行为就好像它们是 block 元素一样，即占据一个新行并占据 100% 的容器。我不想使用 Bootstrap ，因为这是我需要的唯一功能，而且它似乎很容易模拟，只需要一些洞察力。这是基本布局

<div class="container">
  <div class="cell">

  </div>
  <div class="cell">

  </div>

</div>

Answer 1

原理很简单:

.container > div {
  width: 50%;
  float: left;
}
@media (max-width: 800px) {
  .container > div {
    width: 100%;
    float: none;
  }
}

/* the css from this point on is not important, i just added it for clarity */

.container > div {
  text-align: center;
  background-color: #eee;
  border: 1px solid white;
  padding: 20px;
  box-sizing: border-box;
}

<div class="container">
  <div class="cell">
    First cell
  </div>
  <div class="cell">
    Second cell
  </div>
</div>

800px 是布局变化的点。您可以根据需要进行任意数量的 @media 查询。这是 media features 的完整列表你可以使用。