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

你可以新的吗auto-layoutcolclass..

<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

不确定是希望侧边栏在打开时将内容推到右侧，还是希望侧边栏在打开时覆盖内容。

这是重叠边栏的解决方案。

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

@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;
}

<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>

Bootstrap4 中的多个容器彼此相邻

Multiple container next to each other in Bootstrap4

html

css

twitter-bootstrap

bootstrap-4

twitter-bootstrap-4