Bootstrap 3 - 如何使用滚动创建响应式固定右侧菜单

时间：2016-06-16 00:01:40

标签： html css html5 twitter-bootstrap css3

在下一张图片中，您可以看到我想要实现的目标：

桌面 Desktop version

移动

Mobile Version

我该怎么做？

我一直在尝试这样的事情：

Sport

提前致谢。

1 个答案:

答案 0 :(得分：2)

我相信这是你要做的。你可以使用默认的Bootstrap navbar来改变它的位置规则（position: fixed;），以满足你在媒体查询中的需求，所以一旦你低于768px，你的导航就会调整到默认的切换导航。请参阅Navbar以供参考。

工作示例：在整页打开并缩小视口。

html,
body {
  height: 100%;
}
@media (max-width: 767px) {
  body {
    padding-top: 50px;
  }
}
@media (min-width: 768px) {
  .navbar.sidebar-nav {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: auto;
    height: 100%;
    width: 200px;
    background: #222;
    overflow-y: auto;
  }
  .navbar.sidebar-nav .navbar-header {
    width: 100%;
  }
  .navbar.sidebar-nav .navbar-header .navbar-brand {
    float: right;
  }
  .navbar.sidebar-nav .navbar-nav {
    width: 100%;
    height: 100%;
    text-align: right;
  }
  .navbar.sidebar-nav .navbar-nav > li {
    float: none;
    display: block;
  }
  .main-content {
    margin-right: 200px;
  }
}
/*THUMBNAIL FOR DEMO ONLY*/
.thumbnail {
  border: none;
  border-radius: 0px;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.20);
  padding: 25px;
  max-width: 500px;
  margin: 12.5px auto;
}
/*THUMBNAIL FOR DEMO ONLY*/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-fixed-top sidebar-nav">
  <div class="container-fluid">

    <div class="navbar-header">
      <button data-toggle="collapse" type="button" class="navbar-toggle collapsed" data-target="#bs-nav">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Navbar Brand</a>
    </div>

    <div class="navbar-collapse collapse" id="bs-nav">
      <ul class="nav navbar-nav">
        <li><a href="#">Link One</a>
        </li>
        <li><a href="#">Link Two</a>
        </li>
        <li><a href="#">Link Three</a>
        </li>
        <li><a href="#">Link Four</a>
        </li>
        <li><a href="#">Link Five</a>
        </li>
      </ul>
    </div>

  </div>
</nav>

<div class="main-content">
  <div class="container-fluid">
    <div class="row">

      <div class="col-lg-2 col-md-4 col-sm-6">
        <div class="thumbnail">
          <img src="http://placehold.it/450x450/000/000" class="img-responsive" />
        </div>
      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <div class="thumbnail">
          <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
        </div>
      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <div class="thumbnail">
          <img src="http://placehold.it/450x450/000/000" class="img-responsive" />
        </div>
      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <div class="thumbnail">
          <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
        </div>
      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <div class="thumbnail">
          <img src="http://placehold.it/450x450/000/000" class="img-responsive" />
        </div>
      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <div class="thumbnail">
          <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
        </div>
      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <div class="thumbnail">
          <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
        </div>
      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <div class="thumbnail">
          <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
        </div>
      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <div class="thumbnail">
          <img src="http://placehold.it/450x450/000/000" class="img-responsive" />
        </div>
      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <div class="thumbnail">
          <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
        </div>
      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <div class="thumbnail">
          <img src="http://placehold.it/450x450/000/000" class="img-responsive" />
        </div>
      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <div class="thumbnail">
          <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
        </div>
      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <div class="thumbnail">
          <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
        </div>
      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <div class="thumbnail">
          <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
        </div>
      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <div class="thumbnail">
          <img src="http://placehold.it/450x450/000/000" class="img-responsive" />
        </div>
      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <div class="thumbnail">
          <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
        </div>
      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <div class="thumbnail">
          <img src="http://placehold.it/450x450/000/000" class="img-responsive" />
        </div>
      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <div class="thumbnail">
          <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
        </div>
      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <div class="thumbnail">
          <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
        </div>
      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <div class="thumbnail">
          <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
        </div>
      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <div class="thumbnail">
          <img src="http://placehold.it/450x450/000/000" class="img-responsive" />
        </div>
      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <div class="thumbnail">
          <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
        </div>
      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <div class="thumbnail">
          <img src="http://placehold.it/450x450/000/000" class="img-responsive" />
        </div>
      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <div class="thumbnail">
          <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
        </div>
      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <div class="thumbnail">
          <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
        </div>
      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <div class="thumbnail">
          <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
        </div>
      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <div class="thumbnail">
          <img src="http://placehold.it/450x450/000/000" class="img-responsive" />
        </div>
      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <div class="thumbnail">
          <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
        </div>
      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <div class="thumbnail">
          <img src="http://placehold.it/450x450/000/000" class="img-responsive" />
        </div>
      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <div class="thumbnail">
          <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
        </div>
      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <div class="thumbnail">
          <img src="http://placehold.it/450x450/000/000" class="img-responsive" />
        </div>
      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <div class="thumbnail">
          <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
        </div>
      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <div class="thumbnail">
          <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
        </div>
      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <div class="thumbnail">
          <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
        </div>
      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <div class="thumbnail">
          <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
        </div>
      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <div class="thumbnail">
          <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" />
        </div>
      </div>

    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

相关问题
最新问题