垂直堆疊的引導柱沒有頂部邊距

Question

我有一些引導柱，當屏幕寬度較小時，它們垂直堆疊，這很棒，但事實是，它們沒有通常的頂部和底部邊距。

這裏是我的意思是：

如何獲得上邊距在那裏？

代碼：

<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> 

Answer 1

給下邊距，而不是邊距到所有三個的cols。因此，在大屏幕上，底部邊距對於所有三個色譜柱是均勻的，而在響應小型設備中，第二個和第三個色譜柱會將邊緣底部作爲邊緣頂部。

這麼加的，而不是style="margin-bottom:20px"style="margin-top:20px"

評論，如果問題解決不了...！