Несколько контейнеров рядом друг с другом в Bootstrap4

Question

У меня есть макет начальной загрузки, который я пытаюсь разработать как панель инструментов. У меня есть container-fluid как этот

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

It; s высота и ширина 100vh250px. Я применил margin-left:-240px, чтобы он скрывался, и когда пользователь наводил курсор на div 10px, весь div появляется с помощью transitions.

Моя проблема заключается в размещении основного DIV рядом с ним, как и

Как я могу добиться этого? Должен ли я добавить еще container или row?

Answer 1

Не уверен, что если вы хотите боковой панели, чтобы подтолкнуть содержимое на свое право над тем, когда она открывается, или если вы хотите, чтобы боковая панель перекрывала содержимое при его открытии.

Это решение для наложенной боковой панели.

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

Answer 2

Вы можете, Вы новый автоматический макет 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