html - Bootstrap col exeeding 12 in single row 没有填充

Question

我经常使用 bootstrap，但最近遇到了这个问题......

出于某种原因，当我尝试处理图像时，我的 row-col overflow 失去了它们的填充。 然而，当使用 p 元素时，填充就在那里。

有人知道为什么会这样吗？和/或如何解决这个问题。

p {
  background-color: rgb(255, 0, 0);
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<h1>Not Working</h1>

<div class="row">
  <div class="col-md-1 col-sm-2">
    <img src="https://render.guildwars2.com/file/F94ECFFF0FA9C321C108DA34E777B27B0AC9D5F8/66944.png" width="50px" height="50px">
  </div>
  <div class="col-md-1 col-sm-2">
    <img src="https://render.guildwars2.com/file/0CB2040408D0789690575FFE3532F3C34B693C6F/340417.png" width="50px" height="50px">
  </div>
  <div class="col-md-1 col-sm-2">
    <img src="https://render.guildwars2.com/file/021DA825F2092327B1C6BC09EC77BD5DE5B4770D/65961.png" width="50px" height="50px">
  </div>
  <div class="col-md-1 col-sm-2">
    <img src="https://render.guildwars2.com/file/7AF3232140CB5DF159E4E54C2F092F69B5BD460F/499376.png" width="50px" height="50px">
  </div>
  <div class="col-md-1 col-sm-2">
    <img src="https://render.guildwars2.com/file/18CE5D78317265000CF3C23ED76AB3CEE86BA60E/65941.png" width="50px" height="50px">
  </div>
  <div class="col-md-1 col-sm-2">
    <img src="https://render.guildwars2.com/file/205871B734054D0206986FB44D6DC5425E572B0B/220465.png" width="50px" height="50px">
  </div>
  <div class="col-md-1 col-sm-2">
    <img src="https://render.guildwars2.com/file/66BEAC3E5D0EDA160AA4A7942D0C46C27DC0E7AA/65944.png" width="50px" height="50px">
  </div>
  <div class="col-md-1 col-sm-2">
    <img src="https://render.guildwars2.com/file/33653CA0C67796BE03A22B5AE3197D0564376700/434533.png" width="50px" height="50px">
  </div>
  <div class="col-md-1 col-sm-2">
    <img src="https://render.guildwars2.com/file/CC3A2CAADBB2F2B13B1E70079E7E207B08D16E93/65946.png" width="50px" height="50px">
  </div>
  <div class="col-md-1 col-sm-2">
    <img src="https://render.guildwars2.com/file/0BDAA40E3795930BBF3DC5ACE366ABAE2D5BBFB2/65947.png" width="50px" height="50px">
  </div>
  <div class="col-md-1 col-sm-2">
    <img src="https://render.guildwars2.com/file/3501C2BBADF95BE5F14E31484850E851EFCA33CB/434536.png" width="50px" height="50px">
  </div>
  <div class="col-md-1 col-sm-2">
    <img src="https://render.guildwars2.com/file/E90FE803CDC205CDEB13FE03694D4D04757ACF5D/65928.png" width="50px" height="50px">
  </div>
  <div class="col-md-1 col-sm-2">
    <img src="https://render.guildwars2.com/file/A6E2C82153BA684E2D05D3FCA09F3E02431366ED/220461.png" width="50px" height="50px">
  </div>
  <div class="col-md-1 col-sm-2">
    <img src="https://render.guildwars2.com/file/413D7EE8CE04C0BC07C31A4B381EB6344150F849/65930.png" width="50px" height="50px">
  </div>
</div>

<h1>Working</h1>

<div class="row">
  <div class="col-sm-4 col-md-4"><p>A COL</p></div>
  <div class="col-sm-4 col-md-4"><p>A COL</p></div>
  <div class="col-sm-4 col-md-4"><p>A COL</p></div>
  <div class="col-sm-4 col-md-4"><p>A COL</p></div>
  <div class="col-sm-4 col-md-4"><p>A COL</p></div>
  <div class="col-sm-4 col-md-4"><p>A COL</p></div>
  <div class="col-sm-4 col-md-4"><p>A COL</p></div>
  <div class="col-sm-4 col-md-4"><p>A COL</p></div>
  <div class="col-sm-4 col-md-4"><p>A COL</p></div>
  <div class="col-sm-4 col-md-4"><p>A COL</p></div>
  <div class="col-sm-4 col-md-4"><p>A COL</p></div>
  <div class="col-sm-4 col-md-4"><p>A COL</p></div>
  <div class="col-sm-4 col-md-4"><p>A COL</p></div>
  <div class="col-sm-4 col-md-4"><p>A COL</p></div>
  <div class="col-sm-4 col-md-4"><p>A COL</p></div>
  <div class="col-sm-4 col-md-4"><p>A COL</p></div>
</div>

Answer 1

列之间有空格，因为 p 标签上有 margin-bottom。如果你想对 img 标签做同样的事情，那么也将 margin-bottom 应用于 img 标签。