语义UI底部边栏增加大小

时间:2014-11-05 20:17:06

标签: javascript css semantic-ui

有没有办法增加底层版本的语义用户界面Sidebar的大小(高度)?

如果向div元素添加一个宽类,它会切断条形。 “宽”仅用于垂直侧边栏,不用于水平侧边栏。 “宽”仅影响侧边栏的宽度,而不影响其高度。

这是我尝试解决方案的fiddle

HTML

<div class="ui bottom sidebar deep vertical inverted menu" id="bottom-side">
    <div class="header item">Bottom Sidebar menu</div>
    <a class=item>Foo</a>
    <a class=item>Foo</a>
    <a class=item>Foo</a>
</div>

JS

$(document).ready(function () {
   $('#bottom-side').sidebar('toggle');
});

CSS

.ui.deep.bottom.sidebar {
    height: 400px;
}

.ui.deep.active.bottom.sidebar {
    height: 400px;
}

1 个答案:

答案 0 :(得分:3)

语义UI CSS在设置高度时使用!important,因此您还需要使用它来覆盖它。看起来你还需要一个等于高度的负上边距。更新了小提琴:http://jsfiddle.net/m4th0hb3/1/

.ui.deep.active.bottom.sidebar {
    height: 400px !important;
    margin-top: -400px !important;
}