为什么该Bootstrap col删除空白？

Question

I am trying to design a profile page ui, I want the profile name next to the avatar. I am using bootstrap's grid system but getting white space in between each column.

This is the link: https://studentvend.co.uk/profile/test for those who want to see the source code.

Answer 1

It is normal because you are using a col of size 4 and col of size 6. So that basically means that it is going to take 40% of the card and then 60% of the card. It is not exact because Bootstrap is based on 12 columns .

I recommend you use a Media Object instead: 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>