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提供margin-bottom而不是margin-top。所以在大屏幕上，底部边距将对所有三个cols均匀，而在响应小的设备第二和第三列将获得margin-bottom作为margin-top。

所以添加style="margin-bottom:20px"而不是style="margin-top:20px"

评论问题是否解决......！

垂直堆叠的Bootstrap列没有上边距

1 个答案: