css - 使用 Bootstrap 3，如何在断点变小时取消堆叠 cols？

Question

我知道有几种方法可以做到这一点，但我想把它放在那里看看是否有任何干净/好的例子可以做到这一点，因为我没有找到任何运气。

所以在 Bootstrap 中，我基本上有一个宽度低于 780 像素的边。抛开这一点，这是一种独特的情况，随着视口(viewport)变小，该部分实际上变大。

让我试着澄清一下……假设整个页面宽度为 1200 像素，我使用的是容器 -> 行 -> col-md-9 和 col-md-3。 col-md-3 在旁边。在 col-md-3 内部是一个带有 2x col-sm-6 div 的嵌套网格的表单。因此，当页面通过断点下降时，当它低于 980 像素时，旁边变为全宽，因此比 1200 像素时更宽。

Bootstrap 已设置，因此如果您使用 col-sm-6，该列在 780px 下从 50% 宽度变为 100% 宽度。我需要想办法反其道而行之。

我需要 col-sm-6(或者我需要自定义标签等)以在 780 像素以下从 100% 长度变为 50% 长度。

我该怎么做？提前致谢!

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
  
  <div class="row">
  
    <div class="col-sm-6">Box 1</div>
    
    <div class="col-sm-6">Box 2</div>
    
  </div>
  
<div>

所以在上面的示例中...框 1 和框 2 保持相邻，直到视口(viewport)宽度低于 768 像素。

什么是最好的写法，这样 Box 1 和 Box 2 就会堆叠起来，直到视口(viewport)宽度低于 768 像素...然后它们在同一行/内联/其他什么？

Answer 1

您可以在 Bootstrap 行 中的任何列上使用多个col-*-* 类。在您的情况下，您将使用 col-xs-6 col-sm-12 使任何列在最小布局上并排显示，但堆叠在上面的任何内容上:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-6 col-sm-12">
      Box 1
    </div>
    <div class="col-xs-6 col-sm-12">
      Box 2
    </div>
  </div>
</div>

这是一个 Bootply展示这种行为。