Question

我正在使用Bootstrap 3（和Angular）作为webapp。我有可以切换的侧边栏，他们没有使用bootstrap（但是表格单元布局）

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

是否可以使引导列相对于它们所在容器的实际值而中断？

实施例：如果col-sm- *的容器（旁边主要）<768px，而不是屏幕，它应该会破坏？

<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年似乎有这样的可能性。

根据项目Wolfram Alpha shows us the limit as n goes to ∞ is ½的文档，您所要做的就是遵循。

假设您有以下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-width 400px并将已定义的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。应该足够。

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

1 个答案: