如何为不同的屏幕尺寸更改语义 UI 侧边栏的位置？答案

【问题标题】：How to change position of Semantic UI sidebar for different screen sizes?如何为不同的屏幕尺寸更改语义 UI 侧边栏的位置？
【发布时间】：2015-11-11 01:50:16
【问题描述】：

我正在使用语义 UI 侧边栏 — 这是标准设置：

       <div class="ui inverted labeled icon right inline vertical sidebar menu">
          <a class="item">
            <i class="home icon"></i>
            Home
          </a>
          <a class="item">
            <i class="block layout icon"></i>
            Topics
          </a>
          <a class="item">
            <i class="smile icon"></i>
            Friends
          </a>
          <a class="item">
            <i class="calendar icon"></i>
            History
          </a>
        </div>

这里还有一个JSFiddle。

语义 UI 将其侧边栏定位到类 right、left、top 和 bottom。我希望将侧边栏定位为right 用于平板电脑和电脑，top 用于移动设备。

根据屏幕尺寸控制侧边栏位置的最佳方法是什么？换句话说，如何将侧边栏放置在移动设备的顶部，而将其放在右侧以供其他屏幕尺寸使用？

语义 UI 具有用于显示/隐藏内容的 css 类 mobile only、tablet only。但这还不够，因为侧边栏是由 JavaScript 触发的，如下所示：

$('.ui.sidebar')
  .sidebar({
    context: $('.bottom.segment')
  })
  .sidebar('attach events', '.menu .tS')
;

所以我猜我需要某种 JS 和 css 的组合来实现侧边栏根据屏幕大小的动态定位，但我一直无法到达那里。

非常感谢您的建议。从语义 UI 的角度来看，我对什么被认为是最优雅的解决方案特别感兴趣。

这是我第一个使用语义 UI 的项目。

一切顺利，丁丁

【问题讨论】：

你的小提琴是空的。
对此感到抱歉。错玲。现在纠正它。 http://jsfiddle.net/psychomachine/8mwbd5f4/6/

标签： javascript jquery css semantic-ui

【解决方案1】：

仅限移动设备和仅限平板电脑实际上只是基于某些预定屏幕宽度显示/隐藏元素的媒体查询。您可以使用 jQuery 自己完成此操作。

$(window).resize(function () {
   if (window.innerWidth < 600) { //Some arbitrary mobile width
      $(".sidebar").addClass('top').removeClass('right');
   } else {
      $(".sidebar").removeClass('top').addClass('right');
   }
});

【讨论】：