Question

我有这个布局：

+--X---------------+--Y---+
|                  |  A   |
|                  + ---- +
|                  |  B   |
+------------------+------+

X = #main-col和Y = #plugin-col以及A和B为.plugin：

<div class="row">
  <div class="col-md-9" id="main-col">…</div>
  <div class="col-md-3" id="plugin-col">
    <div class="plugin">A</div>
    <div class="plugin">B</div>
  </div>
</div>

现在我正在使用这个JavaScript：

$('#main-col').toggleClass('col-md-9 col-md-12');
$('#plugin-col').toggleClass('col-md-3 col-md-12 row');
$('#plugin-col .plugin').toggleClass('col-md-3');

实现这种布局：

+--X----------------------+
|                         |
|                         |
|                         |
+------+------+-----------+
|  A   |  B   |
+------+------+

有没有办法实现水平＆lt; - ＆gt; A＆amp; amp;垂直重新排序当浏览器窗口在一定宽度之间缩小时，B单元格会自动响应吗？

Answer 1

JS不需要再添加一个row并使用bootstrap col来获得所需的结果。 DEMO

<div class="row">
  <div class="col-md-9" id="main-col">…</div>
  <div class="col-md-3" id="plugin-col">
    <div class="row">
      <div class="plugin col-md-12 col-lg-12 col-xs-6">A</div>
      <div class="plugin col-md-12 col-lg-12 col-xs-6">B</div>
    </div>
  </div>
</div>

在网格系统中对单元进行垂直重新排序

1 个答案: