代码之家 › 专栏 › 技术社区 › Alex

如何使图像叠加卡边框在引导4?

bootstrap-4 css html

Alex · 技术社区 · 6 年前

当你使用卡片时,整个卡片都有一个边界。它在图像的底角处创建了一个不太好看的像素偏移。看起来图像离左边太远了一个像素。

我试过给出图像的负边缘和左右位置,但不起作用。

有没有最佳的做法或优雅的方式,使图像重叠的边缘卡?

<link href="https://stackpath.bootstrapcdn.com/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>

jsfiddle

2 回复 | 直到 6 年前

Lalji Tadhani 6 年前

试试这个方法

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

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

Oneezy 6 年前

您可以取消设置 .card 的border类,并将border赋给 .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>