在小屏幕尺寸上将引导导航栏置于顶部答案

【问题标题】：Bootstrap navbar to top on small screen size在小屏幕尺寸上将引导导航栏置于顶部
【发布时间】：2019-06-28 22:18:39
【问题描述】：

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

【问题讨论】：

标签： javascript html twitter-bootstrap breakpoints screen-size

【解决方案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

【讨论】：