html - Bootstrap 网格的问题

Question

我的页面在电脑上看起来像这样:

而且我不会在移动尺寸上变成这样:

这有可能解决吗？

Answer 1

参见此处:http://getbootstrap.com/css/#grid-example-mixed

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

以上是阅读的地方。

这就是我会做的: 我会先制作 2 列，在第一列中我会在彼此的顶部添加两个 div。

我在每个 div 中都使用了 style="" 来向您清楚地显示添加的 CSS

http://jsfiddle.net/Preben/gmvuv8L0/

<div class="row">
      <div class="col-xs-6" style="min-height:300px;">
         <div style="width:100%;margin-bottom:20px;background:#cecece;min-height:180px;">content</div>
         <div style="width:100%;background:#cecece;min-height:100px;">content</div>
      </div>
      <div class="col-xs-6" style="background:#cecece;min-height:300px;">Column # 2</div>
</div>