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;
  }
}

希望有帮助！让我知道您是否还有其他问题。

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

在小尺寸屏幕上将导航栏引导到顶部

1 个答案: