时间戳

首页 > 解决方案 > 如何减少引导行内 div 的上边距

html - 如何减少引导行内 div 的上边距

问题描述

我有html文件使用bootstrap rows和columns排列元素。当我放在里面时，顶部和底部row class显示不需要的一个。margindivsrow class

这是我的代码

<div class="row">    
    <div style="margin-left: 20px;" class="col-md-11 card card-body bg-light">
      <div style="background-color: blue;" class="row">
        <div class="col-md-9">   

          <div style="background-color: green;">    
            <mat-tab-group #tabRef>
              <mat-tab label="Angular">Angular Content</mat-tab>
              <mat-tab label="React">React Content</mat-tab>
              <mat-tab label="VueJs">VueJs Content</mat-tab>
            </mat-tab-group>    
          </div>        
          <div id="map">   
          </div>

        </div>

        <div class="col-md-3">                               
          <div style="border: none; margin-top: 25px; width: 95%;">
          
          </div>

         </div>
      </div>
    </div>   
</div>

这是输出截图

在此处输入图像描述

我尝试使用 rowno-gutters但m-0 p-0没有margin减少。我怎样才能解决这个问题？

标签： htmlcsstwitter-bootstrap

解决方案

在 BS 中，类card具有 default padding: 1.25rem;。通过在您的卡片类别旁边添加py-0或删除它。p-0

演示：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="row">    
    <div style="margin-left: 20px;" class="col-md-11 card card-body bg-light py-0">
      <div style="background-color: blue;" class="row">
        <div class="col-md-9">   

          <div style="background-color: green;">    
            <mat-tab-group #tabRef>
              <mat-tab label="Angular">Angular Content</mat-tab>
              <mat-tab label="React">React Content</mat-tab>
              <mat-tab label="VueJs">VueJs Content</mat-tab>
            </mat-tab-group>    
          </div>        
          <div id="map">   
          </div>

        </div>

        <div class="col-md-3">                               
          <div style="border: none; margin-top: 25px; width: 95%;">
          
          </div>

         </div>
      </div>
    </div>   
</div>

推荐阅读