Question

我最近一直在尝试使用Bootstrap来创建一个新网站。我想要实现的是一个2柱系统（带有粘性侧边栏的主体区域，内部有单独的容器）。我希望侧边栏中的容器能够展开以显示更多内容，然后折叠回正常onclick，独立于侧边栏本身。主体区域独立于侧边栏滚动，反之亦然，它们表现为两个独立的区域。

基本上： 1.侧边栏将具有定义的宽度 2.单击侧栏内的其中一个容器，该容器展开重叠在主体上方的宽度和高度。 3.不要让它改变整体布局，只需展开以显示更多内容。

这是我目前的HTML：

<body>

<header class="navbar navbar-default navbar-fixed-top" id="header">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <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="">
        <img alt="EQO" id="logo" src="EQO.png"></img>
      </a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
        <form class="navbar-form navbar-left" role="search">
            <div class="input-group">
                <input type="text" class="form-control input-sm" placeholder="Search" name="q">
                <div class="input-group-btn">
                    <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                </div>
            </div>
        </form>
        <ul class="nav navbar-nav navbar-right">            
                </li>
                <li>
                    <a href='#'>
                        Discover!
                    </a>
                <li>
                    <a data-toggle="modal" href='#signup'>
                        Sign up
                    </a>
                </li>
                <li>
                    <a data-toggle="modal" href="#login">
                        Login
                    </a>
                </li>
        </ul>
  </div><!-- /.container-fluid -->
</header>

<div class="container-fluid" id="main">
<!--main area-->
    <div class="row">
        <div class="column col-md-10" id="middle">
            <div class="col-md-12" id="profile_picture" style=" margin-bottom: 10px; background: #ccc;">

            </div>
            <ul class="nav nav-tabs">
                  <li role="presentation" class="active"><a href="#">Home</a></li>
                  <li role="presentation"><a href="#">Profile</a></li>
                  <li role="presentation"><a href="#">Messages</a></li>
            </ul>
            <div class="col-md-12" style="height: 100%; background: #ccc;">

            </div>
        </div>

<!--widget area-->
        <div class="column col-md-2" id="sidebar">
            <div class="col-md-12" id="widget1">
                Sample widget 1
            </div>
            <div class="col-md-12" id="widget2">
                Sample widget 1
            </div>
            <div class="col-md-12" id="widget1">
                Sample widget 1
            </div>
            <div class="col-md-12" id="widget2">
                Sample widget 1
            </div>
            <div class="col-md-12" id="widget1">
                Sample widget 1
            </div>
            <div class="col-md-12" id="widget2">
                Sample widget 1
            </div> 
            <div class="col-md-12" id="widget1">
                Sample widget 1
            </div>
            <div class="col-md-12" id="widget2">
                Sample widget 1
            </div>
            <div class="col-md-12" id="widget1">
                Sample widget 1
            </div>
        </div>
    </div>
</div>

<div class="navbar navbar-fixed-bottom" id="footer" >
<!--footer area-->
    <div class="col-md-12" id="footer_content" >

    </div>
</div>  

</body>

这是我用来展示我希望侧边栏表现如何的模型。 sidebar example

我只是不确定如何实现这一点。我不知道我是否只是完全忽略了一些东西，但我不认为它只能用css魔法和Bootstrap解决，这就是为什么我要求帮助。我知道有折叠和手风琴的功能，但那些似乎没有给我我想要去的效果，除非它们可以通过实际工作的方式进行修改然后嘿我所有的耳朵。

Answer 1

首先，我认为你必须为每个小部件定义一个新行（你可以有嵌套的行）：

<div class="column col-md-2" id="sidebar">
  <div class="row">
    <div class="col-md-12" id="widget1">
      blabla
    </div>
  </div>
  <div class="row">
    <div class="col-md-12" id="widget2">
      blabla
    </div>
  </div>
</div>

其次，对于崩溃/展开，你必须在触发器上添加jquery和set：

data-toggle="collapse" data-target="#ID_OF_TARGET"

在目标上，正确的ID：

class="collapse in"

“in”用于强制数据在启动时展开。

我使用面板和a jsfiddle作为示例one with simple div。希望它有所帮助！

Answer 2

这可以通过将正文设置为完整高度和overflow:hidden来完成。允许每列上溢出。这可以在媒体查询中完成，以便列在较小的屏幕上垂直堆叠......

   body {
      overflow: hidden;
   }

   #main, #main>.row {
      height: 100%;
   }

  #left {
    top: 0;
    bottom: 0;
    overflow-y: auto; 
  }

  #right {
    top: 0;
    overflow-y: auto;
  }

http://www.codeply.com/go/uTJG2ELrRP

Bootstrap扩展侧边栏容器

2 个答案: