Bootstrap4中彼此相邻的多个容器

Question

我有一个bootstrap布局，我试图将其作为仪表板开发。 我有container-fluid这样的

<div class="row">
        <div class="col-10 col-md-3 col-lg-3 col-sm-6">
</div>

它的高度为100vh，宽度为250px。我已应用margin-left:-240px以隐藏它，当用户将鼠标悬停在10px div上时，整个div会显示transitions。

我的问题是在它旁边放一个主div，就像这样

我怎样才能做到这一点？我应该添加其他container还是row？

Answer 1

你可以使用新的自动布局col类..

<div class="container-fluid">
    <div class="row">
        <div class="sidebar bg-faded">Sidebar</div>
        <div class="col bg-inverse text-white">
            Content
        </div>
    </div>
</div>

演示：http://www.codeply.com/go/pDFygIAy9G

Answer 2

不确定您是否希望侧边栏在打开时将内容向右推，或者您希望侧边栏在打开时叠加内容。

以下是覆盖侧边栏的解决方案。

＆＃13;

＆＃13;

$( '.sidebar' ).on( 'click', function ( e ) {
  $( this ).toggleClass( 'closed' );
} );

＆＃13;

@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );

.sidebar {
  position: absolute;
  left: 0;
  top: 0;
  width: 250px;
  height: 100vh;
  color: white;
  background-color: black;
  transition: left 500ms ease-in-out;
  z-index: 5;
}
.sidebar.closed {
  left: -240px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<aside class="sidebar closed">
  <p>
    Sidebar
  </p>
</aside>
<div class="container-fluid">
  
  <div class="row">
    <div class="col-xs-6">
      .col-md-6
    </div>
    <div class="col-xs-6">
      .col-md-6
    </div>
  </div>
    
</div>

＆＃13;

＆＃13;

＆＃13;