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

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>

作为 pusher 中的内容，一个网格的图像如下：

 <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

不是最优雅的解决方案，但您可以通过添加事件来捕获侧边栏的显示/隐藏来手动调整 .pusher 的宽度。

关键是提供百分比宽度。也请查看Bootstrap's Grid System。