css - 如果最后一个为空，如何将 CONTENT 跨越 ASIDE

Question

我有一个 Bootstrap 3 布局，主要是 2 列宽。左侧的 NAV 列(类为“col-sm-3”)和右侧的 CONTENT 列(类为“col-sm-9”)。

<nav class='col-sm-3'>
  ...
</nav>
<article class='col-sm-9'>
  ...
</nav>

我还需要添加第三列，即 SIDEBAR:

<nav class='col-sm-3'>
  ...
</nav>
<article class='col-sm-6'>
  ...
</nav>
<aside class='col-sm-3'>
  ...
</nav>

但我的问题是 ASIDE 并不总是充满内容，所以我希望 ARTICLE 能够跨越通常专用于 ASIDE 的空间，以防它是空的(比如替换“col-sm-6”与“col-sm-9”)。

怎么做？

Answer 1

您不能单独通过 Bootstrap 框架来完成 - 您需要引入一些 Jquery。看一看-Remove or hide a div if it's empty

您需要在该 div 为空时将其删除，并向文章 div 添加类以增加 col 大小。这就是我的做法。