Bootstrap扩展侧边栏容器

-1

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

所以基本上： 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这就是为什么我寻求帮助解决。我知道有崩溃和手风琴的功能，但这些似乎并没有给我我想要去的效果，除非他们可以修改的方式来实际工作，然后嘿我所有的耳朵。

来源

2016-09-20 Aricrepp

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

<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和设置，在触发：

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

和目标，正确的ID：

class="collapse in"

的 “in” 是这里给力的数据在启动时扩大。

我做过a jsfiddle作为使用面板和one with simple div的例子。希望能帮助到你！

来源

2016-09-20 11:18:47 bertbk

我喜欢这一点，但我希望它扩展它的宽度和高度，而不仅仅是手风琴或崩溃。这不是专门为移动 – Aricrepp

我的坏我没有得到它，我仍然不确定你想要什么。它是什么东西[像覆盖]（http://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp）？ – bertbk

这可以通过将身体设置为全高来完成，并且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

来源

2016-09-20 12:05:10 ZimSystem

我想要的更多的是沿着水平和垂直展开的方向，而不仅仅是手风琴或者倒塌。不需要专注于制作更小的屏幕 – Aricrepp

是的，你需要做一些努力来调整它。 SO不是一种编码服务。 – ZimSystem

我知道SO不是......在我的问题中，我表示我知道手风琴和崩溃，你所评论的就是这个。 – Aricrepp

Bootstrap扩展侧边栏容器

回答

相关问题