如何让bootstrap列响应堆栈？

Question

我试图将我的内容页面分成两列col-xs-6列，以便在较小的屏幕/移动设备上相互叠加。当我尝试最小化屏幕时，列只是混合在一起而不是堆叠。我觉得我错过了一些重要的东西，因为我认为bootstrap列自动响应就像本网站上的那些：

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行乱丢页面，但这也没有改变布局。我也在基本模板中获得了标准的bootstrap cdn和jquery。我错过了什么使列垂直堆叠？

Answer 1

使单独的列堆叠得很好

我使用了像https://github.com/Sam152/Javascript-Equal-Height-Responsive-Rows这样的javascript库，使所有列（在同一行）具有相同的高度。这样引导程序可以很好地处理它并很好地堆栈它们。

仅在移动设备或小型

上进行列堆叠

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

xs-col-6的含义是：对于xs设备（或更大），分为2列（12/6 = 2）

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

解释

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

记住bootstrap定义了这些步骤（xs，sm，md，lg）。它们也受到某个像素宽度的限制。因此，当您使用手机时（电话主要是xs，sm），无法保证它会显示移动布局。

替代方案

您可以使用.hidden-lg

等类隐藏某些屏幕宽度的块

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

简易工具

此处使用：http://shoelace.io/使您的网格以您想要的方式响应。它为您生成HTML代码。只需复制粘贴div中的类，即可获得所需的响应能力。