带有语义 UI 可见侧边栏的推送内容太宽

当使用可见的语义 UI 侧边栏时，推送器中的内容太宽。它具有浏览器窗口的宽度，而不是可用空间的宽度。

<div class="pushable">
    <div class="ui left vertical inverted visible sidebar menu">
        <a class="item" href="/">Item</a>
    </div> 
    <div class="pusher">                                                                                 
            My content 
        <table class="ui red table"><thead><th>1</th></thead>
            <tbody><td>Test</td></tbody>
        </table>
    </div>
</div>

在这里查看 jsfiddle：http://jsfiddle.net/xh9p6tgb/1/ http://jsfiddle.net/xh9p6tgb/1/

如果你想拥有一个始终可见的类似侧边栏的元素，那么你可以尝试使用语义 UI 菜单 http://semantic-ui.com/collections/menu.html而不是侧边栏。它的内置类应该足够了，以便您可以将其用作侧面菜单并相应地缩放您的内容。

侧边栏的设计目的不是自动缩放推送元素内的内容。相反，它被设计为一个临时菜单，可以覆盖内容或将内容推到一边。

您可以在初始化期间使用动画选项更改侧边栏动画类型，例如：

// Add javascript here
$(document).ready(function() {
    $(".ui.sidebar").sidebar({
        transition: 'overlay'
    });
});

但是，如果您希望侧边栏具有动画效果，但也有一个pinned函数，那么您很可能必须自己实现它。可能像添加一个pinned类到侧边栏，或者只使用visible类来确定推送器是否应该使用一些 CSS 来缩小：

.ui.sidebar.visible ~ .pusher {
    width: calc(100% - 260px);
}

不幸的是，这个动画看起来有点奇怪，但它是可用的。

你可以在这里看到它http://jsfiddle.net/rkkmLtzn/ http://jsfiddle.net/rkkmLtzn/