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

Question

I am using Bootstrap 3 (and Angular) for a webapp. I have sidebars which can be toggled, they are not using bootstrap (but table-cell layout)

I created a demo here: http://plnkr.co/edit/0pGjRqfqF21lGvhuNb9k?p=preview

Is it possible to make bootstrap columns break relative to the actual with of the container they are in?

Example: A col-sm-* should break if its container (aside-main) is <768px, not the screen ?

<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

In 2018 seems there are such possibilities.

According to the documentation of project https://github.com/marcj/css-element-queries all you have to do is following.

Let's say you have following html element.

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

And you define following 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;
}

And include scripts

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

Functionality of the project will find html elements that css is referring to and will only listen to changes of those elements.

"no performance issues since it listens only on size changes of elements that have element query rules defined through css. "

eg when an element that is "watched" exceeds width of 400 on watched element will be added css attribute min-width 400px and defined css will be applied to it.

Also for this to work you need to trigger the event listening or initialization yourself:

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();

It's not exactly breaking bootstrap columns, but you can control css based on the width of the container. Should suffice.