如何在引导程序中的卡之间添加填充答案

【问题标题】：How to add padding in between cards in bootstrap如何在引导程序中的卡之间添加填充
【发布时间】：2018-05-17 23:14:04
【问题描述】：

我有一排由 8 张卡片组成。我想将所有这些都放在一行中。左侧有一个列大小为 2 的边距，我设置了每张大小为 1 的卡片（所以 8 + 2 = 10）但是后来，我的行全乱了。

目前我的边框代码是

<div class="row">
<div class="col-sm-2">
<div class="card-header"> Discover new genres {{genre}}</div>
</div>
  <div class="col-lg-1 text-center">
    <div class="card border-secondary mb-3" style="width: 10rem;">
      <img class="card-img-top img-responsive full-width circle-img rounded-circle" src="{{rec['artpath']}}" alt="{{rec['name']}}"> 
</img>
   <div class="card-block">
    <div class="card-body"><p class="card-title text-center "><small>{{rec["name"]}}</small></p></div>
   </div>
    </div>
</div> 
</div>

我希望卡片有这个宽度（所以卡片不要小）..它可以在屏幕右侧溢出.. 我该怎么做？

【问题讨论】：

这是在container 还是container-fluid 内？
@snack_overflow 容器流体
我建议创建一个包含您的 CSS 的codepen，然后我们可以尝试为您解决此问题。如果没有看到这段代码周围的内容，我们很难复制这个问题。

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

问题与width:10rem 的内联样式有关。当col-lg-1 大于该列宽时，它将取代它的宽度。删除此内联样式会导致预期的行为。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-4">
      <div class="card-header"> Discover new genres {{genre}}</div>
    </div>

    <div class="col-4 text-center">
      <div class="card border-secondary mb-3" style="">
        <img class="card-img-top img-responsive full-width circle-img rounded-circle" src="{{rec['artpath']}}" alt="{{rec['name']}}"> 
        <div class="card-block">
          <div class="card-body">
            <p class="card-title text-center">
              <small>{{rec["name"]}}</small>
            </p>
          </div>
        </div>
      </div>
    </div> 

    <div class="col-4 text-center">
      <div class="card border-secondary mb-3" style="">
        <img class="card-img-top img-responsive full-width circle-img rounded-circle" src="{{rec['artpath']}}" alt="{{rec['name']}}"> 
        <div class="card-block">
          <div class="card-body">
            <p class="card-title text-center">
              <small>{{rec["name"]}}</small>
            </p>
          </div>
        </div>
      </div>
    </div> 
    
  </div>
</div>

出于本示例的目的，我已将您的列断点更改为在您选择“运行代码片段”时效果更好的东西。我怀疑您正在应用内联宽度，因为 col-lg-1 太小了；在这种情况下，我建议您考虑使用更大的列断点来代替覆盖网格行为的内联样式。

【讨论】：