Question

使用卡片时，整个卡片都有边框。它在图像的底角处创建了一个不太好看的像素偏移。图像似乎离左侧太远了一个像素。

我尝试给图像提供负边距和左右定位，但这不起作用。

有没有使图像与卡片边框重叠的最佳实践或优雅方法？

class demo{    
  @Test
  public void testDemo(){
  System.out.println("Hello World");
  }     
}

jsfiddle

Answer 1

尝试这种方式

.card-img-top {
    margin-top: -1px;
    margin-left: -1px;
    margin-right: -1px;
    width: calc(100% + 2px);
   }

http://jsfiddle.net/lalji1051/5psLgxe2/3/

Answer 2

您可以取消设置.card的边框类，而将边框赋予.card-body的类。

.card { border: unset !important; }
.card-body { border: 1px solid rgba(0,0,0,.125); border-radius: 0 0 .25rem .25rem; }

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container pt-5 px-5">
  <div class="card-deck">
    <div class="card bg-light">
        <img class="card-img-top" src="https://via.placeholder.com/500x180/095865/000000">
      <div class="card-body text-center">
        <h2 class="card-title">Lorem ipsum</h2>
        <p class="card-text">
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </p>
      </div>
    </div>
    <div class="card bg-light">
        <img class="card-img-top" src="https://via.placeholder.com/500x180/095865/000000">
      <div class="card-body text-center">
        <h2 class="card-title">Lorem ipsum</h2>
        <p class="card-text">
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </p>
      </div>
    </div>
  </div>
  
</div>

如何使图像覆盖Bootstrap 4中的卡片边框？

2 个答案: