Bootstrap 4卡：删除空白

时间：2019-07-04 07:34:25

标签： css twitter-bootstrap bootstrap-4 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="row">


  <div class="card bg-light col-sm-3">
    <div class="row">
      <div class="card-header col-6 border">
        <img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
      </div>
      <div class="card-body col-6 border">
        <h5 class="card-title">1234567899</h5>
      </div>
      <div class="card-body col-12 border">
        <h5 class="card-title"><a href="#" class="btn btn-block btn-primary">Go somewhere</a></h5>
      </div>
    </div>
  </div>

  <div class="card bg-light col-sm-3">
    <div class="row">
      <div class="card-header col-6 border">
        <img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
      </div>
      <div class="card-body col-6 border">
        <h5 class="card-title">1234567899</h5>
      </div>
      <div class="card-body col-12 border">
        <h5 class="card-title"><a href="#" class="btn btn-block btn-primary">Go somewhere</a></h5>
      </div>
    </div>
  </div>

  <div class="card bg-light col-sm-3">
    <div class="row">
      <div class="card-header col-6 border">
        <img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
      </div>
      <div class="card-body col-6 border">
        <h5 class="card-title">1234567899</h5>
      </div>
      <div class="card-body col-12 border">
        <h5 class="card-title"><a href="#" class="btn btn-block btn-primary">Go somewhere</a></h5>
      </div>
    </div>
  </div>

  <div class="card bg-light col-sm-3">
    <div class="row">
      <div class="card-header col-6 border">
        <img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
      </div>
      <div class="card-body col-6 border">
        <h5 class="card-title">1234567899</h5>
      </div>
      <div class="card-body col-12 border">
        <h5 class="card-title"><a href="#" class="btn btn-block btn-primary">Go somewhere</a></h5>
      </div>
    </div>
  </div>
</div>

卡中有很多空白空间。我需要它为： enter image description here

3 个答案:

答案 0 :(得分：1)

您可以通过添加class="p-0 my-auto"来删除padding并将其垂直居中来做到这一点。下面是相同的工作片段

.card-body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-body.col-6 {
  background: red
}

@media(min-width:768px) {
  .card-title {
    font-size: 3vw;
    text-align: center;
    word-break: break-all;
  }
  .img-container {
    height: 63px;
    width: 100%;
    object-fit: cover;
  }
}

@media(max-width:767px) {
  .card-title {
    font-size: 8.5vw;
    text-align: center;
    word-break: break-all;
  }
  .img-container {
    height: 80px;
    width: 100%;
    object-fit: cover;
  }
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid">
  <div class="row">
    <div class="card bg-light col-md-4">
      <div class="row">
        <div class="card-header col-6 border p-0">
          <img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-container" />
        </div>
        <div class="card-body col-6 border p-0 ">
          <h5 class="card-title text-center">1234567899</h5>
        </div>
        <div class="card-body col-12 border p-0">
          <a href="#" class="btn btn-block btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>

    <div class="card bg-light col-md-4">
      <div class="row">
        <div class="card-header col-6 border p-0">
          <img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-container" />
        </div>
        <div class="card-body col-6 border p-0 ">
          <h5 class="card-title text-center">1234567899</h5>
        </div>
        <div class="card-body col-12 border p-0">
          <a href="#" class="btn btn-block btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>

    <div class="card bg-light col-md-4">
      <div class="row">
        <div class="card-header col-6 border p-0">
          <img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-container" />
        </div>
        <div class="card-body col-6 border p-0  ">
          <h5 class="card-title text-center">1234567899</h5>
        </div>
        <div class="card-body col-12 border p-0">
          <a href="#" class="btn btn-block btn-primary">Go somewhere</a>
        </div>

      </div>
    </div>
  </div>

解决方案2：按照评论中的问题回答。将高度固定为col。下面是相同的解决方案

.card-body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-body.col-6 {
  background: red
}

@media(min-width:768px) {
  .card-title {
    font-size: 3vw;
    text-align: center;
    word-break: break-all;
  }
}

@media(max-width:767px) {
  .card-title {
    font-size: 8.5vw;
    text-align: center;
    word-break: break-all;
  }
}

.col-6 {
  height:65px;
}
.img-fluid {
 height:100%!important;
}
.card-header.col-6{
     background: black
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid">
  <div class="row">
    <div class="card bg-light col-md-4">
      <div class="row">
        <div class="card-header col-6 border p-0 text-center">
          
            <img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
         
        </div>
        <div class="card-body col-6 border p-0 ">
          <h5 class="card-title text-center">1234567899</h5>
        </div>
        <div class="card-body col-12 border p-0">
          <a href="#" class="btn btn-block btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>

    <div class="card bg-light col-md-4">
      <div class="row">
        <div class="card-header col-6 border p-0 text-center">
          <img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
        </div>
        <div class="card-body col-6 border p-0 ">
          <h5 class="card-title text-center">1234567899</h5>
        </div>
        <div class="card-body col-12 border p-0">
          <a href="#" class="btn btn-block btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>

    <div class="card bg-light col-md-4">
      <div class="row">
        <div class="card-header col-6 border p-0 text-center">
          <img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
        </div>
        <div class="card-body col-6 border p-0  ">
          <h5 class="card-title text-center">1234567899</h5>
        </div>
        <div class="card-body col-12 border p-0">
          <a href="#" class="btn btn-block btn-primary">Go somewhere</a>
        </div>

      </div>
    </div>
  </div>

答案 1 :(得分：0)

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<style>
.card-title {
    margin-bottom: 0;
}
</style>

<div class="row">


  <div class="card bg-light col-sm-3">
    <div class="row">
      <div class="col-4 p-0 border">
        <img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
      </div>
      <div class="col p-0 border text-center">
        <h5 class="card-title">1234567899</h5>
      </div>
      <div class=" col-12 p-0 border">
        <h5 class="card-title"><a href="#" class="btn btn-block btn-primary">Go somewhere</a></h5>
      </div>
    </div>
  </div>


  <div class="card bg-light col-sm-3">
    <div class="row">
      <div class="col-4 p-0 border">
        <img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
      </div>
      <div class="col p-0 border text-center">
        <h5 class="card-title">1234567899</h5>
      </div>
      <div class=" col-12 p-0 border">
        <h5 class="card-title"><a href="#" class="btn btn-block btn-primary">Go somewhere</a></h5>
      </div>
    </div>
  </div>


  <div class="card bg-light col-sm-3">
    <div class="row">
      <div class="col-4 p-0 border">
        <img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
      </div>
      <div class="col p-0 border text-center">
        <h5 class="card-title">1234567899</h5>
      </div>
      <div class=" col-12 p-0 border">
        <h5 class="card-title"><a href="#" class="btn btn-block btn-primary">Go somewhere</a></h5>
      </div>
    </div>
  </div>


  <div class="card bg-light col-sm-3">
    <div class="row">
      <div class="col-4 p-0 border">
        <img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
      </div>
      <div class="col p-0 border text-center">
        <h5 class="card-title">1234567899</h5>
      </div>
      <div class=" col-12 p-0 border">
        <h5 class="card-title"><a href="#" class="btn btn-block btn-primary">Go somewhere</a></h5>
      </div>
    </div>
  </div>
</div>

答案 2 :(得分：0)

    <section class="test">
     <div class="container">
     <div class="row">
        <div class="col-lg-3 col-md-4 col-sm-6 mb-3 ">
           <div class="card bg-light">
              <div class="card-body p-0">
                 <div class="row no-gutters">
                    <div class="col-lg-5 border">
                      <img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
                    </div>
                    <div class="col-lg-7 border px-3 pt-2">
                      <h5 class="card-title">1234567899</h5>
                    </div>
                 </div>
              </div>
              <div class="card-footer">
                  <h5 class="card-title"><a href="#" class="btn btn-block btn-primary">Go somewhere</a></h5>
              </div>
           </div>
        </div>

        <div class="col-lg-3 col-md-4 col-sm-6 mb-3 ">
           <div class="card bg-light">
              <div class="card-body p-0">
                 <div class="row no-gutters">
                    <div class="col-lg-5 border">
                      <img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
                    </div>
                    <div class="col-lg-7 border px-3 pt-2">
                      <h5 class="card-title">1234567899</h5>
                    </div>
                 </div>
              </div>
              <div class="card-footer">
                  <h5 class="card-title"><a href="#" class="btn btn-block btn-primary">Go somewhere</a></h5>
              </div>
           </div>
        </div>

        <div class="col-lg-3 col-md-4 col-sm-6 mb-3">
           <div class="card bg-light">
              <div class="card-body p-0">
                 <div class="row no-gutters">
                    <div class="col-lg-5 border">
                      <img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
                    </div>
                    <div class="col-lg-7 border px-3 pt-2">
                      <h5 class="card-title">1234567899</h5>
                    </div>
                 </div>
              </div>
              <div class="card-footer">
                  <h5 class="card-title"><a href="#" class="btn btn-block btn-primary">Go somewhere</a></h5>
              </div>
           </div>
        </div>

        <div class="col-lg-3 col-md-4 col-sm-6 mb-3 ">
           <div class="card bg-light">
              <div class="card-body p-0">
                 <div class="row no-gutters">
                    <div class="col-lg-5 border">
                      <img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
                    </div>
                    <div class="col-lg-7 border px-3 pt-2">
                      <h5 class="card-title">1234567899</h5>
                    </div>
                 </div>
              </div>
              <div class="card-footer">
                  <h5 class="card-title"><a href="#" class="btn btn-block btn-primary">Go somewhere</a></h5>
              </div>
           </div>
        </div>

        </div>
     </div>
  </section>
相关问题
最新问题