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

Question

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

  <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

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

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

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

Fitting pusher to browser window when sidebar is open

css

grid

sidebar

meteor

semantic-ui