在Materialise css中创建小Navbar和侧面板

时间:2016-06-30 10:42:51

标签: css navbar sidebar materialize

我正在为我的新项目使用materialize css。我有一个简单的模拟我想到的页面。这就是我想要的。上面的导航栏和侧面板不应该隐藏。

The screen mock up

我已经尝试更改物化的css以获得侧导航栏,但无济于事。我改变了

@media only screen and (max-width: 992px) {
    .side-nav.fixed {
-webkit-transform: translateX(-105%);
        transform: translateX(-105%);
}

@media only screen and (max-width: 2000px) {
    .side-nav.fixed {
-webkit-transform: translateX(-105%);
        transform: translateX(-105%);
}

我也尝试更改.js文件,但它也没有用。我减少了普通导航栏的大小,超出了导航的line-height属性。是否可以将导航栏放在一起?如果没有,我怎么能得到一个侧面板。我只需要侧面板显示4个图标,这些图标将有工具提示,点击后会加载模态。我尝试使用materializecss的网格机制但是无法得到我想要的东西。

非常感谢任何帮助。

感谢。

1 个答案:

答案 0 :(得分:6)

您是否尝试使用顶部导航栏和固定侧边栏?然后,您可以设置侧边栏的宽度,以获得所需的尺寸。

  a b c
1 1 1 1
2 1 2 2
3 2 1 1
4 1 1 2 
...