Question

我是Bootstrap的新手，所以请原谅我，如果我没有得到它。这更像是一个设计决策问题，而不是一个技术问题，但我注意到在一个小设备上的引导仪表板示例Bootstrap 4 dashboard example中，由于左侧菜单完全崩溃而且没有+到，所以无法浏览应用程序展开导航栏。在这里的3.3版本：Bootstrap 3.3 dashboard example当设备非常小时，至少有一个+允许你展开顶部导航栏但是左边垂直菜单上的所有选项都完全丢失。

如果没有左边的菜单，我觉得该应用程序将无法使用。我错过了什么吗？

Answer 1

Bootstrap示例中的默认侧边栏显示隐藏display: none; 并且对于屏幕宽度> 768 px @media (min-width: 768px) {}他们显示了这个区块。

你可以自己做.. 这是原始的Bootstrap代码：

/* Hide for mobile, show later */
.sidebar {
  display: none;
}
@media (min-width: 768px) {
  .sidebar {
    position: fixed;
    top: 51px;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: block;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
    background-color: #f5f5f5;
    border-right: 1px solid #eee;
  }
}

仪表板示例菜单选项在小型设备上消失

1 个答案: