引导程序中列之间的间距答案

【问题标题】：Spacing between columns in bootstrap引导程序中列之间的间距
【发布时间】：2021-03-09 22:02:12
【问题描述】：

我是使用官方引导教程创建的 ->

使用下面的代码 ->

<div class="card-deck mb-3 text-center">
<div class="card mb-4 shadow-sm">
  <div class="card-header">
    <h4 class="my-0 font-weight-normal">Free</h4>
  </div>
  <div class="card-body">
    <h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ mo</small></h1>
    <ul class="list-unstyled mt-3 mb-4">
      <li>10 users included</li>
      <li>2 GB of storage</li>
    </ul>
  </div>
</div>
<div class="card mb-4 shadow-sm">
  <div class="card-header">
    <h4 class="my-0 font-weight-normal">Pro</h4>
  </div>
  <div class="card-body">
    <h1 class="card-title pricing-card-title">$15 <small class="text-muted">/ mo</small></h1>
    <ul class="list-unstyled mt-3 mb-4">
      <li>20 users included</li>
      <li>10 GB of storage</li>
    </ul>
    </div>
</div>
<div class="card mb-4 shadow-sm">
  <div class="card-header">
    <h4 class="my-0 font-weight-normal">Enterprise</h4>
  </div>
  <div class="card-body">
    <h1 class="card-title pricing-card-title">$29 <small class="text-muted">/ mo</small></h1>
    <ul class="list-unstyled mt-3 mb-4">
      <li>30 users included</li>
      <li>15 GB of storage</li>
      <li>Phone and email support</li>
      <li>Help center access</li>
    </ul>
    <button type="button" class="btn btn-lg btn-block btn-primary">Contact us</button>
  </div>

现在我想减小这些列之间的间距。为此可以做些什么？

【问题讨论】：

标签： html bootstrap-4

【解决方案1】：

如果你查看 bootstrap 的 CSS 文件，你会发现这些样式

@media (min-width: 576px) {
  .card-deck {
     -ms-flex-flow: row wrap;
     flex-flow: row wrap;
     margin-right: -15px;
     margin-left: -15px;
  }
  .card-deck .card {
     display: -ms-flexbox;
     display: flex;
    -ms-flex: 1 0 0%;
    flex: 1 0 0%;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-right: 15px;
    margin-bottom: 0;
    margin-left: 15px;
  }
}

这意味着您的卡片之间有 15 像素的边距。

所以你需要用你的 CSS 文件中的值覆盖它

喜欢

@media (min-width: 576px) {

    .card-deck {
         margin-right: -10px;
         margin-left: -10px;
     }
     .card-deck .card {
         margin-right: 10px;
         margin-left: 10px;  
     }
  }

例如小提琴https://jsfiddle.net/1g46tLc9/

【讨论】：

【解决方案2】：

您需要将 m、p、mr、mb 等类添加到您的 div 中。

查看这篇解释所有这些的帖子post

注意：这是使用引导程序的方法。如果您想添加一些特定值，最好将这些引导类的边距设置为 0，然后将您的自定义边距值添加到卡片/div

【讨论】：