使卡片内部列之间的间距变小

Question

​

​

我有这个形状，想要近似每一列之间的距离，这意味着我想近似每一个蓝色部分之间的距离，我如何做that_？

Card.vue：

<template>
  <div>
    <div class="card d-inline-flex" style="width: 40rem; height:7rem; ">
      <div class="row background">
        <div class="col">
         <div class="p-5 bg-info rounded-left ">Flex item 1</div>
        </div>
        <div class="col">
          <div class="p-5 bg-info rounded-0 ">Flex item 1</div>
        </div>
        <div class="col">
          <div class="p-5 bg-info rounded-right">Flex item 1</div>
        </div>
      </div>
    </div>
  </div>
</template>    
<script></script>    
<style>
.background {
  background-color: #dcdcdc;
}
.d {
  margin-left: 4px;
}
</style>

Answer 1

之所以有这个空格，是因为bootstrap预先定义了类col的padding和padding的值为15px。因此，要获得所需的空间，只需在div中添加一个自定义类，并使用padding和padding即可。但是不要忘记使用"!important“，因为你想覆盖Bootstrap定义的样式。下面是一个例子：

<template>
  <div>
    <div class="card d-inline-flex" style="width: 40rem; height:7rem; ">
      <div class="row background">
        <div class="col a">
         <div class="p-5 bg-info rounded-left ">Flex item 1</div>
        </div>
        <div class="col a">
          <div class="p-5 bg-info rounded-0 ">Flex item 1</div>
        </div>
        <div class="col a">
          <div class="p-5 bg-info rounded-right">Flex item 1</div>
        </div>
      </div>
    </div>
  </div>
</template>    
<script></script>    
<style>
.background {
  background-color: #dcdcdc;
}
.d {
  margin-left: 4px;
}
.a {
padding-left:0 !important!;
padding-right:0 !important!;
}
</style>

在这里，我使用了一个名为a的自定义类，只需使用padding来获得所需的空间。