縦に積み重ねられたブートストラップ列には余白がありません

ブートストラップ列があり、画面の幅が狭くなると垂直に積み重ねられますが、これは通常の上下の余白がありません。ここで縦に積み重ねられたブートストラップ列には余白がありません

は、私が何を意味するかです：

私はそこで上マージンを取得するにはどうすればよいですか？

コード：

<div class="modal-body"> 
    <div class="container-fluid"> 
     <div class="row"> 
     <div class="col-sm-5 col-lg-3"> 
      <div id="image" [ngStyle]="{ 'background-image': 'url(' + selectedResult?.result.result.image + ')'}"></div> 
     </div> 
     <div class="col-sm-7 col-lg-4"> 
      <div id="result-attributes"> 
       <div class="row"> 
        <div class="col-sm-12" id="rate-container"> 
        <div class="pull-xs-right"> 
         <div class="left-rating border"> 
          <img src="images/star-filled-large.png" width="30px"> 
          <h3>{{averageRating}}</h3> 
          <small>/ 10</small> 
          <small class="votes left">{{votesCount}} votes</small> 
         </div> 
         <div (click)="ratingStarClick()" class="right-rating"> 
          <div id="rating-content"> 
           <img src="images/star-filled-large.png" width="30px"> 
           <h3>{{userRating}}</h3> 
           <small>/ 10</small> 
          </div> 
          <small class="votes right">you</small> 
         </div> 
        </div> 
        <div class="col-sm-12"> 
         <div id="rate-div" style="" *ngIf="showRatingStars"> 
          <div id="rate-title"> rate me!</div> 
          <div id="rate-contents"> 
           <img (click)="starClick(event)" id="star1" [src]="imgSrc1" width="20px" on-mouseover='ratingStarDivHover($event)' on-mouseleave="ratingStarLeave($event)"> 
           <img (click)="starClick(event)" id="star2" [src]="imgSrc2" width="20px" on-mouseover='ratingStarDivHover($event)' on-mouseleave="ratingStarLeave($event)"> 
           <img (click)="starClick(event)" id="star3" [src]="imgSrc3" width="20px" on-mouseover='ratingStarDivHover($event)' on-mouseleave="ratingStarLeave($event)"> 
           <img (click)="starClick(event)" id="star4" [src]="imgSrc4" width="20px" on-mouseover='ratingStarDivHover($event)' on-mouseleave="ratingStarLeave($event)"> 
           <img (click)="starClick(event)" id="star5" [src]="imgSrc5" width="20px" on-mouseover='ratingStarDivHover($event)' on-mouseleave="ratingStarLeave($event)"> 
           <img (click)="starClick(event)" id="star6" [src]="imgSrc6" width="20px" on-mouseover='ratingStarDivHover($event)' on-mouseleave="ratingStarLeave($event)"> 
           <img (click)="starClick(event)" id="star7" [src]="imgSrc7" width="20px" on-mouseover='ratingStarDivHover($event)' on-mouseleave="ratingStarLeave($event)"> 
           <img (click)="starClick(event)" id="star8" [src]="imgSrc8" width="20px" on-mouseover='ratingStarDivHover($event)' on-mouseleave="ratingStarLeave($event)"> 
           <img (click)="starClick(event)" id="star9" [src]="imgSrc9" width="20px" on-mouseover='ratingStarDivHover($event)' on-mouseleave="ratingStarLeave($event)"> 
           <img (click)="starClick(event)" id="star10" [src]="imgSrc10" width="20px" on-mouseover='ratingStarDivHover($event)' on-mouseleave="ratingStarLeave($event)"> 
          </div> 
         </div> 
        </div> 
        </div> 
       </div> 
       <div class="row"> 
       </div> 
      </div> 
     </div> 
     <div class="col-lg-5"> 
      <div id="shops-section"> 
       <!--<input placeholder="try another location" id="area-input" #areaInput type="text"/>--> 
       <div id="map" #map></div> 
       <ul> 
        <li *ngFor="let shop of selectedResult?.result.result.nearbyShops"> 
        <div class="shop-details"> 
         {{ shop.name }} 
        </div> 
        </li> 
       </ul> 
      </div> 
     </div> 
     </div> 
    </div> 
</div>

出典

2016-09-29 BeniaminoBaggins

他の列に余白を適用すると、フォームグループクラスを使用してみます。 –