Question

我目前正在使用名为'dashboard'的bootstrap中的示例我想让顶部导航栏真正位于侧导航栏下面。就像这个例子：Image Example from Dribbble

我已将来自bootstrap的仪表板代码放到jsfiddle上，以方便那些愿意提供帮助的人使用（我非常感谢任何帮助）。 https://jsfiddle.net/1dy65wqx/

它应该影响这个：

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
    <a class="navbar-brand" href="#">Dashboard</a>
    <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Settings</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Profile</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Help</a>
        </li>
      </ul>
      <form class="form-inline mt-2 mt-md-0">
        <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>
</header>

<div class="container-fluid">
  <div class="row">
    <nav class="col-sm-3 col-md-2 d-none d-sm-block bg-light sidebar">
      <ul class="nav nav-pills flex-column">
        <li class="nav-item">
          <a class="nav-link active" href="#">Overview <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Reports</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Analytics</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Export</a>
        </li>
      </ul>

      <ul class="nav nav-pills flex-column">
        <li class="nav-item">
          <a class="nav-link" href="#">Nav item</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Nav item again</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">One more nav</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Another nav item</a>
        </li>
      </ul>

      <ul class="nav nav-pills flex-column">
        <li class="nav-item">
          <a class="nav-link" href="#">Nav item again</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">One more nav</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Another nav item</a>
        </li>
      </ul>
    </nav>

Answer 1

我更改了几个样式，请将其添加到您的css文件中..

<div class="row" style="position:relative;">
        <nav class="col-sm-3 col-md-2 d-none d-sm-block bg-light sidebar" style="position:fixed; z-index:2000; top:0px;">

顶部导航栏位于侧导航栏下方

1 个答案: