Question

让我们考虑以下语义ui页面结构（使用meteor）：

  <div class="ui top attached demo menu">
    {{> header}}
  </div>
  <div id="main" class="ui bottom attached segment">
    <div class="ui teal labeled left inline vertical sidebar menu">
      {{> sidebar}}
    </div>
    <div class="pusher">
      {{> yield}}
    </div>
  </div>

作为推动器内的图像网格内容如下：

 <div class="ui sixteen column wide center aligned grid book-grid">
    {{#each book}}
    <div class="center aligned column item">
      <div class="ui basic segment">
        <img src="{{cover}}" class="ui fluid image">
        <p>{{title}}</p>
      </div>
    </div>
    {{/each}}
  </div>

当侧边栏打开时，是否可以让推动器动态适应浏览器？我的内容被推离屏幕（标准行为），但我喜欢图像网格以适应新的面板宽度。感谢

Answer 1

不是最优雅的解决方案，但您可以通过添加事件来手动调整// find the maximum absolute value int k = .1 + std::accumulate(input.begin(), input.end(), 0.0, [](double m, double e){return std::max(m, std::abs(e));} ); // size the count array std::vector<int> counts(4*k+1); // count them all for( auto e : input ) ++counts[2*k + int(2*e + .1)]; // growable array std::vector<double> result; // but we already know what size it will be (optional step) result.reserve(std::distance(input.begin(), input.end())); // turn counts into that many elements, in iteration order (thus sorted) for( int i = 0; i < counts.size(); ++i ) result.resize(result.size() + counts[i], i/2.0 - k);的宽度，以捕获侧边栏的显示/隐藏。

关键是以百分比形式提供宽度。另请查看Bootstrap's Grid System。

当侧边栏打开时，将推动器安装到浏览器窗口

1 个答案: