Question

我刚刚开始创建一个网站，这次尝试了不同的方法，需要一些帮助！我所做的是，我创建了一个折叠的导航栏，该导航栏的顶部带有徽标，但是当您单击移动设备上的菜单图标时，它们会正确地在徽标下方打开导航栏：

然后您将屏幕伸展开，它变成这样：

我只想将导航栏向上移动到笔记本电脑上，然后将其保持在移动设备上的位置，有什么想法吗？这是代码。

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active" style="width: 150px;"><a href="#">Home</a></li>
        <li class="dropdown" style="width: 150px;">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 </a>
        </li>
        <li style="width: 150px;"><a href="#">Page 2</a></li>
        <li style="width: 150px;"><a href="#">Page 3</a></li>
      </ul>

    </div>
  </div>
</nav>

CSS：

.navbar .navbar-nav {
    display: inline-block;
    float: none;
}

.navbar .navbar-collapse {
    text-align: center;
    background-color: #1B1819;
}

.navbar .navbar-header {
    margin-top: -200px;
}

.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {

margin-top: 100px;
}

Bootstrap Navbar在移动设备上的位置

0 个答案: