Bootstrap 3基于父列大小的嵌套列大小调整

Question

我在模板中有以下代码：

<div class="row">
  <div class="col-xs-8 col-xs-offset-2 col-sm-6 col-sm-offset-0 col-md-4 col-md-offset-0 col-lg-3 col-md-offset-0">
    {{ COLUMN CONTENT }}
  </div>
  <div class="col-xs-8 col-xs-offset-2 col-sm-6 col-sm-offset-0 col-md-4 col-md-offset-0 col-lg-3 col-md-offset-0"">
    {{ COLUMN CONTENT }}
  </div>
</div>

模板将在不同的上下文中呈现，其中一个将嵌套在一列中。因此，如果显示很大（.col-lg-3），我希望有4个元素，如果模板显示在一个完整的容器中，而不是嵌套在一列中，我只想要这个。

是否可以让Bootstrap CSS根据可用空间而不是窗口大小来决定列类（.col-*）？如果没有，我该如何实现呢？

Answer 1

不，至少不是以有效的方式。您应该使用Javascript来确定空间，然后决定应用哪个类。