代码之家 › 专栏 › 技术社区 › Robert Andrews

如何消除引导卡内并排列的水平间隙?

bootstrap-4 twitter-bootstrap

Robert Andrews · 技术社区 · 6 年前

我有一张这样的卡片。。。

<div class="d-flex align-items-stretch col-6 col-sm-6 col-md-4 col-lg-4 col-xl-4 p-2 ">
    <!-- Card -->
    <a href="https://www.example.com" class="card w-100 bg-white text-dark border-1 shadow-sm rounded-top rounded-bottom">

        <div class="card-header bg-white pb-0 pt-0 border-top">
            <div class="row">
                <div class="col-6 bg-success p-0">
                    <img src="http://res.cloudinary.com/braincloud/image/fetch/w_300,h_300,c_thumb,g_faces/http://www.example.com/wp-content/uploads/groupm-dominic-grainger-thumbnail-1024x576.jpg" class="w-100">
                </div>
                <div class="col-6 p-0">
                                                <img src="https://logo.clearbit.com/groupm.com" class="img-fluid w-100 logocenter">                </div>
            </div>
        </div>

        <!-- Title -->
        <div class="card-body pb-0 pt-2 mt-0">
            <p class="card-title pt-2 font-weight-normal">How Europe Can Hit Addressable Scale: Grainger, GroupM</p>
        </div>

        <!-- Date -->
        <div class="card-footer bg-white text-muted small pt-0 border-top-0">Dec 13, 2018</div>
    </a>
    <!-- end .card -->
</div>

里面有两张图片 .card-header .row ,其中有两个6宽的列。

问题在于,图像两侧都存在水平间隙。我怎样才能摆脱这个?我希望图像能够到达卡的边缘(但也可以通过 .rounded-top

上 .卡头 ...

.mx-0 无所事事

.px-0 结束

一行 ...

px-0

mx-0 将行/图像缩小得太小,这与我需要的相反。。。

.卡头 ...

这是 一行

我需要改变什么?

1 回复 | 直到 6 年前

IvanS95 6 年前

我想说你可以做两件事中的一件,用你的标记,你将不得不删除页面上的水平边距和填充 row card-header px-0 和 mx-0 ,但您还必须将图像上的角磨圆,以便与卡的其余部分很好地匹配。

编辑: 我注意到页眉角落的剩余空间是由于页眉顶部有一个2px的边框,用 border-top-0 您可以去掉空格,只需使用与页眉相同的值对图像进行四舍五入,即 calc(.25rem - 1px)

如果可以稍微更改标记,另一种选择是使用Bootstrap4 card

.card-header .row .col-6:first-child img {
  border-radius: calc(.25rem - 1px) 0 0 0;
}

.card-header .row .col-6:last-child img {
  border-radius: 0 calc(.25rem - 1px) 0 0;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />

<!-- Bootstrap 4 Card -->
<div class="card" style="width: 18rem;">
  <div class="row no-gutters">
    <div class="col-6">
      <img class="w-100" src="https://via.placeholder.com/100" alt="Card image cap">
    </div>
    <div class="col-6">
      <img class="w-100" src="https://via.placeholder.com/100" alt="Card image cap">
    </div>
  </div>
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>


<!-- Your code -->
<div class="d-flex align-items-stretch col-6 col-sm-6 col-md-4 col-lg-4 col-xl-4 p-2">
  <!-- Card -->
  <a href="https://www.example.com" class="card w-100 bg-white text-dark border-1 shadow-sm rounded-top rounded-bottom">

    <div class="card-header border-top-0 bg-white pb-0 pt-0 border-top px-0">
      <div class="row mx-0 px-0">
        <div class="col-6 bg-success p-0">
          <img src="http://res.cloudinary.com/braincloud/image/fetch/w_300,h_300,c_thumb,g_faces/http://www.example.com/wp-content/uploads/groupm-dominic-grainger-thumbnail-1024x576.jpg" class="w-100">
        </div>
        <div class="col-6 p-0">
          <img src="https://logo.clearbit.com/groupm.com" class="img-fluid w-100 logocenter"> </div>
      </div>
    </div>

    <!-- Title -->
    <div class="card-body pb-0 pt-2 mt-0">
      <p class="card-title pt-2 font-weight-normal">How Europe Can Hit Addressable Scale: Grainger, GroupM</p>
    </div>

    <!-- Date -->
    <div class="card-footer bg-white text-muted small pt-0 border-top-0">Dec 13, 2018</div>
  </a>
  <!-- end .card -->
</div>