将 Bootstrap 列相互堆叠

Question

我正在使用 Bootstrap v3 开发我的界面。
我使用以下 sn-p：

    <div class="row">
        <div class="col-sm-4 col-xs-4">
            <h1>Hello...!</h1>
            <p>Para 1</p>
        </div>
        <div class="col-sm-8 col-xs-8">
            <h1>new div</h1>
            <p>Para 2</p>
        </div>
    </div>

但是，当我减小浏览器的大小（宽度）时，列会越来越小。
我希望，在某个限制或最小宽度之后，div 必须相互堆叠而不是变小。

Answer 1

点击此链接了解 xs 和 sm 的列/网格的确切大小，http://getbootstrap.com/css/#grid-example-mixed 您正在使用自定义宽度功能，方法是使用

   <div class="col-sm-4 col-xs-4" >

这会根据设备尺寸提供自定义宽度。而不是默认情况下将列堆叠起来，只需使用此

   <div class="col-md-4"> 

而不是 xs(xtra small) 和 sm(small size)，默认使用 medium size，bootstrap 会完成剩下的工作。 另一件事，您的列（4 和 8）也有两种不同的大小，视图会不规则。 还有一件事，如果您想继续使用自定义列的大小而不是我的方法，请记住这一点：xs-4 与 sm-4 不同

Answer 2

在bootstrap-3中“类前缀”表示如下：

.col-xs - 超小型设备 - 电话 (

.col-sm - 小型设备 - 平板电脑（≥768px）

.col-md - 中型设备 - 桌面（≥992px）

.col-lg - 大型设备桌面（≥1200px）

在您的编码中（您要求的是桌面版本，我想是的...）您必须删除 class="col-sm-8 col-xs-8" 并添加 class="col-md-8 col-lg-8"

上面的代码结果，div 相互叠加，而不是根据需要变小。

Answer 3

只需删除非堆叠的 'col-xs-*' 网格类..

<div class="row">
  <div class="col-sm-4">
    <h1>Hello...!</h1>
    <p>Para 1</p>
  </div>
  <div class="col-sm-8">
    <h1>new div</h1>
    <p>Para 2</p>
  </div>
</div>

演示：http://bootply.com/92512