Bootstrap4中多个容器彼此相邻答案

【问题标题】：Multiple container next to each other in Bootstrap4Bootstrap4中多个容器彼此相邻
【发布时间】：2017-02-13 23:58:42
【问题描述】：

我有一个引导布局，我正在尝试将其开发为仪表板。我有一个像这样的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？

【问题讨论】：

也许this可以帮助你。
您是否希望您正在隐藏/显示的 侧边栏 旁边的内容与侧边栏一起滑入和滑出？还是应该与内容重叠？
@this.Believer - 你有几个很好的 cmets 和建议。你试过了吗？您需要澄清问题，以便我们提供帮助。
我需要它滑入/滑出而不与它们重叠。

标签： html css twitter-bootstrap bootstrap-4 twitter-bootstrap-4

【解决方案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

【讨论】：

我不太明白发生了什么。您能否解释一下您在演示中使用的p-2 类。我想它是 flexbox 类？
只是填充。你应该read the docs。接受答案，以便其他人知道问题已解决。

【解决方案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>

【讨论】：

我希望侧边栏将内容推送到右侧而不是覆盖。
@this.Believer 您需要在问题中指定。
好吧，对不起。你能告诉我怎么做吗？
您已将重复标记为一项并在其中发表评论。我很困惑。 @ZimSystem
@this.Believer 我没有看到任何被标记为“重复”的东西。不知道你在说什么。您目前有两个答案，1) 覆盖（由我）和 2) 幻灯片（由 ZimSystem）解决方案。如果这些解决方案不适合您请更新您的答案，提供更多细节和最小、完整且可验证的示例，here's how。