0
부트 스트랩 열이 약간 있습니다. 화면의 너비가 좁아지면 수직으로 쌓습니다.하지만 위아래 여백은 없습니다.수직으로 쌓아 올려 진 부트 스트랩 열에는 상단 여백이 없습니다.
가 어떻게 거기에 상단 여백을받을 수 있나요 : 여기
는 내 말은 무엇인가?
코드 :
<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>
폼 그룹 클래스를 사용하여 다른 열에 여백을 적용 해보십시오. –