Bootstrap 导航栏到小屏幕尺寸的顶部

Question

我希望实现简单的功能，但在任何 Bootstrap 文档或在线任何地方似乎都找不到好的解决方案。 我想在引导程序中创建一个位于屏幕左侧的导航栏。 当屏幕尺寸较小时，我希望导航栏位于屏幕顶部。 如何做到这一点？ 理想情况下，我想通过 HTML 或 CSS 严格实现这一点。

Answer 1

Bootstrap 不支持左对齐导航栏。 但是你可以很容易地通过媒体查询自己制作一个。 这是一个简单的例子：

/* mobile default is left aligned */
.navbar {
  position: fixed;
  left: 0;
  top: 0;
  display: inline-block;
  width: 50px;
  height: 100%; 
}

.navbar-item {
  /* navbar items shown vertically on mobile */
  display: block;
}

@media screen and (min-width: 480px) {
  .navbar {
    /* morphs to full width on top on screens larger than mobile */
    height: 50px;
    width: 100%;
  }

  .navbar-item {
    /* Navbar items are now rendered side by side */
    display: inline-block;
  }
}

希望有帮助！ 如果您有任何其他问题，请告诉我。

编辑：这是带有此代码的示例工作代码笔链接： https ://codepen.io/anon/pen/ewyLvW