基于容器实际宽度的Twitter引导3断点

Question

我使用引导带3(和角)作为一个网络应用程序。我有可以切换的边栏，它们不是使用引导程序(而是表格单元格布局)。

我在这里创建了一个演示：http://plnkr.co/edit/0pGjRqfqF21lGvhuNb9k?p=preview

是否有可能使引导列相对于它们所在容器的实际使用中断？

例:如果一个容器(备用-main)是<768 is，而不是屏幕，那么它应该中断吗？

<div class="row" ng-controller="demoCtrl">
<div class="aside-container">
  <div class="aside-main">
    <div class="col-sm-12">
      <h2>Main Content Area</h2>
      <div class="row">
        <div class="col-sm-6">
          <strong>column 1</strong>             
        </div>
        <div class="col-sm-6">
          <strong>column 2</strong>             
        </div>
      </div>
    </div>
  </div>
  <div class="aside" ng-if="asideIn">
    <div class="col-sm-12">
      <h2>Aside Area</h2>
      here is the aside content
    </div>
  </div>
</div>

​

Answer 1

2018年似乎存在这样的可能性。

根据项目https://github.com/marcj/css-element-queries的文档，您所要做的就是遵循以下内容。

假设您有以下html元素。

<div class="parent">
    <h2>Test</h2>
</div>

然后定义如下css

.parent h2 {
    font-size: 12px;
}

.parent[min-width~="400px"] h2 {
    font-size: 18px;
}

.parent[min-width~="600px"] h2 {
    padding: 55px;
    text-align: center;
    font-size: 24px;
}

.parent[min-width~="700px"] h2 {
    font-size: 34px;
    color: red;
}

并包括脚本

<script src="src/ResizeSensor.js"></script>
<script src="src/ElementQueries.js"></script>

项目的功能将找到css所引用的html元素，并且只会听取这些元素的更改。

“没有性能问题，因为它只侦听通过css定义元素查询规则的元素的大小更改。”

例如，当被“监视”的元素在监视元素上超过400的宽度时，将添加css属性min-Width400px，并将定义的css应用于它。

此外，要使其正常工作，您需要自己触发事件侦听或初始化：

var ElementQueries = require('css-element-queries/src/ElementQueries');

 //attaches to DOMLoadContent
ElementQueries.listen();

//or if you want to trigger it yourself.
// Parse all available CSS and attach ResizeSensor to those elements which have rules attached
// (make sure this is called after 'load' event, because CSS files are not ready when domReady is fired.
ElementQueries.init();

它并不完全破坏引导列，但是您可以根据容器的宽度来控制css。应该就够了。