為什么該Bootstrap col刪除空白？

Question

我正在嘗試設計個人資料頁面ui，我想要頭像旁邊的個人資料名稱。 我正在使用bootstrap的網格系統，但在每一列之間都留有空白。

這是鏈接： https : //studentvend.co.uk/profile/test，用於那些想要查看源代碼的人。

Answer 1

這是正常的，因為您使用的是大小為4的col和大小為6的col。因此，這基本上意味着它將占用卡的40％，然后再占用卡的60％。 這是不准確的，因為Bootstrap基於12列 。

我建議您改用媒體對象 ： https : //getbootstrap.com/docs/4.0/layout/media-object/

<div class="media">
  <img class="mr-3" src="..." alt="Generic placeholder image">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
</div>