div 사이에 부트 스트랩 4 사이의 수평 여백을 만드는 방법 scss

Question

부트 스트랩과 새스를 사용하는 법을 배우려합니다. 나는 겉으로는 단순한 무엇인가에 머물러 있지만, 나는 그걸 작동시키지 못합니다. 아래 div 사이에 여백을 만드는 방법은 무엇입니까?

모든 div에 margin-top 또는 margin-bottom을 삽입하려했지만 찾고있는 결과를 얻을 수 없습니다. 컨테이너에있는 div를 래핑하려고 시도하고 여러 가지 방법으로 행을 삽입했지만이 시간 이후에는 더 이상 무엇을 볼지 모릅니다. 매회마다 마진을 추가 한 후 div가 길어 지거나 짧아집니다. div는 배경 색상 때문에 서로 계속 붙어 있습니다. 나는 그들 사이에 빈 공간을 갖고 싶다.

scss를 조정하려면 어떻게해야합니까?

HTML

<div class="container"> 
    <div class="main_body"><div class="sidebar"></div> 
     <div class="main_content"> 
      <div class="main_items"> 
       <div class="profileTabs"></div> 
       <div class="profileHead"></div> 
       <div class="interests"></div> 
       <div class="profileLabels"></div> 
      </div> 
----------------------------------margin------------------------------- 
      <div class="item"> 
       <div class="avatars"></div> 
       <div class="content"></div> 
      </div> 
      <div class="item"> 
       <div class="avatars"></div> 
       <div class="content"></div> 
      </div> 
     </div> 
    </div> 
</div> 

하는 SCS

.container { 
    @include make-container(); 
    .main_body { 
    @include make-row(); 
    .sidebar { 
     @include make-col-ready(); 
     @include make-col(1.8, 12); 
     margin-right: 15px; 
    } 
    .profileTabs { 
     @include make-col-ready(); 
     @include make-col(10, 10); 
    } 
    .main_content { 
     @include make-col-ready(); 
     @include make-col(10, 12); 
     .main_items { 
     @include make-row(); 
     .profileHead { 
      @include make-col-ready(); 
      @include make-col(2, 10); 
     } 
     .interests { 
      @include make-col-ready(); 
      @include make-col(2, 10); 
     } 
     .profileLabels { 
      @include make-col-ready(); 
      @include make-col(2, 10); 
     } 
     } 
     .item { 
     @include make-row(); 
     .avatars { 
      @include make-col-ready(); 
      @include make-col(2.2, 10); 
     } 
     .content { 
      @include make-col-ready(); 
      @include make-col(7.8, 10); 
     } 
     } 
    } 
    } 
} 

Answer 1

당신은 <hr>을 사용할 수 있습니다.

귀하가 찾고있는 것일 수 있습니다. 당신은 부트 스트랩 4 [간격 유틸리티] 시도에 대해 (https://getbootstrap.com/docs/4.0/utilities/spacing/#notation) 무엇을 제공하여 이후 jsfiddle