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而不是侧边栏。它内置的类应该足够，以便您可以将其用作侧面菜单并相应地扩展内容。

侧边栏不是为了自动缩放推送元素内的内容而设计的。相反，它设计成一个瞬态菜单，可以叠加或推送内容到旁边。

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

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

但是，如果您希望侧边栏是动画的，但也有固定功能，那么您很可能必须自己实现。可能类似于在边栏中添加固定类，或者只是使用可见类来确定推送器是否应该通过使用某些CSS来缩小：

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

不幸的是，动画看起来有点像这样但有点可用。

您可以在此处查看http://jsfiddle.net/rkkmLtzn/

使用语义UI可见侧栏的推送内容太宽

1 个答案: