在Bootstrap4中彼此相鄰的多個容器

我有一個引導佈局，我試圖將其作爲儀表板進行開發。我有一個container-fluid這樣在Bootstrap4中彼此相鄰的多個容器

<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顯示。

我的問題是把它旁邊的一個主要格，像這樣

我怎樣才能做到這一點？我應該添加另一個container或row？

來源

2017-02-13 Rehan

什麼是'COL-10' –

也許[這]（http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp）可以幫助你。 –

您是否想要隱藏/顯示的_sidebar_旁邊的內容與側欄一起滑入和滑出？還是應該重疊內容？ – hungerstar

不知道，如果你想補充工具欄推打開時過來，或者如果內容在它的右邊您希望邊欄在打開時覆蓋內容。

下面是覆蓋邊欄的解決方案。

$('.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>

來源

2017-02-13 15:58:42 hungerstar

我希望側邊欄將內容推送到右側，而不是覆蓋。 – Rehan

@ this.Believer你需要在你的問題中指定。 – hungerstar

好的抱歉。你能告訴我我該怎麼做嗎？ – Rehan

你行你新的自動佈局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

來源

2017-02-13 15:49:09 ZimSystem

我真的不明白髮生了什麼事。你能否介紹一下你在演示中使用過的'p-2'類。我想這是flexbox類？ – Rehan

這只是填充。你應該[閱讀文檔]（http://v4-alpha.getbootstrap.com/utilities/spacing/）。接受答案，以便其他人知道問題已解決。 – ZimSystem

在Bootstrap4中彼此相鄰的多個容器

回答

相關問題