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

Question

当使用可见的语义 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/

Answer 1

如果你想要一个始终可见的侧边栏元素，那么你可以尝试只使用 Semantic UI Menu而不是侧边栏。它内置的类应该足够了，以便您可以将其用作侧菜单并相应地缩放您的内容。

侧边栏并非旨在自动缩放 pusher 元素内的内容。相反，它被设计为一个临时菜单，可以覆盖或将内容推到一边。

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

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

但是，如果您希望侧边栏具有动画效果但也有固定功能，那么您很可能必须自己实现。可能类似于添加 固定 类到侧边栏，或者只使用 可见 类来确定插入器是否应该使用一些 CSS 缩小:

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

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

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