如何让引导列响应地堆叠？

Question

我正在尝试让我的内容页面通常被分成两个 col-xs-6 列，以便在较小的屏幕/移动设备上垂直堆叠。当我尝试最小化屏幕时，这些列只是混合在一起而不是堆叠。我觉得我错过了一些重要的东西，因为我认为引导列会像这个网站上的那样自动响应：

https://getbootstrap.com/examples/grid/

我的html代码：

<div class="container-fluid">

  <div class="row">
    <div class="col-xs-12 aboutbg">About Us
    </div>
  </div>

  <div class="row">
    <div class="col-xs-6 aboutrow text">
      <h2>Home Roots</h2>
      <p> Founded right here in Ontario</p>
    </div>
    <div class="col-xs-6 aboutrow pic">
      <h3>insert pic</h3>
    </div>

    <div class="col-xs-6 aboutrow pic">
      <h2>insert pic</h2>
    </div>
    <div class="col-xs-6 aboutrow text">
      <h2>Our Values</h2>
      <p>Good food makes good people</p>
    </div>

    <div class="col-xs-6 aboutrow text">
      <h2>Our Promise to You</h2>
      <p>The freshest and the bestest of foods</p>
    </div>
    <div class="col-xs-6 aboutrow pic">
      <h3> Insert pic</h3>
    </div>
  </div>

我尝试在页面上乱扔 div 行，但这也不会改变布局。我在基本模板中也有标准的引导 cdn 和 jquery。让列垂直堆叠我缺少什么？

Answer 1

使单独的列很好地堆叠

我使用了 javascript 库，例如：https://github.com/Sam152/Javascript-Equal-Height-Responsive-Rows，使所有列（在同一行）具有相同的高度。这样bootstrap就可以很好地处理它并且很好地堆叠它们。

使列仅在移动设备或小型设备上堆叠

或者您的意思是：您希望它们在移动设备中堆叠，但在桌面设备中成为两个单独的列？

xs-col-6 的意思是：对于 xs 设备（或更大）分成 2 列 (12 /6 = 2)

使用：xs-col-12 sm-col-6

解释

这意味着对于 xs 或更大的设备使用 1 列，对于 sm 设备或更大的设备使用 2 列。

记住引导程序定义了这些步骤（xs、sm、md、lg）。它们也被绑定了一定的像素宽度。所以，不保证当你使用手机时它实际上会显示手机布局（手机大多是xs，sm）。

替代方案

您可以使用 .hidden-lg 之类的类将特定屏幕宽度的块全部隐藏起来

参考：http://getbootstrap.com/css/#responsive-utilities

易于加工

在这里使用：http://shoelace.io/ 让您的网格以您想要的方式响应。它为您生成 html 代码。只需将类复制粘贴到您的 div 中即可获得所需的响应能力。