css - 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 来确定空间，然后决定应用哪个类。