Fatal编程技术网
  • css/
  • Css 引导4卡：删除空白

Css 引导4卡：删除空白

css twitter-bootstrap bootstrap-4

Css 引导4卡：删除空白,css,twitter-bootstrap,bootstrap-4,Css,Twitter Bootstrap,Bootstrap 4,1234567899 1234567899 1234567899 1234567899 您可以通过添加class=“p-0 my auto”来删除填充和垂直居中。下面是同样的工作片段 。卡体{ 显示器：flex； 对齐项目：居中； 证明内容：中心； } .card-body.col-6{ 背景：红色 } @介质（最小宽度：768px）{ .名片名称{ 字体大小：3vw； 文本对齐：居中； 单词break：打破一切； } .img集装箱{ 高度：63px； 宽度：100%； 对象匹配：覆盖； }


1234567899
1234567899
1234567899
1234567899
您可以通过添加
class=“p-0 my auto”
来删除
填充和垂直居中。下面是同样的工作片段



。卡体{
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.card-body.col-6{
背景：红色
}
@介质（最小宽度：768px）{
.名片名称{
字体大小：3vw；
文本对齐：居中；
单词break：打破一切；
}
.img集装箱{
高度：63px；
宽度：100%；
对象匹配：覆盖；
}
}
@介质（最大宽度：767px）{
.名片名称{
字体大小：8.5vw；
文本对齐：居中；
单词break：打破一切；
}
.img集装箱{
高度：80px；
宽度：100%；
对象匹配：覆盖；
}
}



1234567899
1234567899
1234567899


.名片名称{
页边距底部：0；
}
1234567899
1234567899
1234567899
1234567899




1234567899
1234567899
1234567899
1234567899

内容（1234567899）将始终是10位数字，并且在
之间没有任何空格（我无法编辑，因此在此处发表了评论）实现这一点有什么问题？这似乎是一个简单的CSS改变，我请看图片中的问题，我想这样。在你的回答中，它只是到了中心我不想要文本上方和下方的空间（1234567899）@或者现在就检查一下，这次成功了，但是图像被拉伸了<代码>对象匹配：覆盖将根据容器的宽度缩放图像。如果不需要在
col
中填充整个图像，您可以根据需要为
col
指定固定高度。希望你的疑虑消除。如果你觉得我的回答对你有帮助，请接受我的回答。您能告诉我您做了哪些更改吗？这样我就可以在我的服务器上试用（原始代码）。我必须删除列中的多余空间。如果这不符合你的要求。因此，请向我解释什么让我兴奋的问题您做了什么来删除额外的空间？我在专栏中添加了引导类
p-0
。是的，请看我的图片，div占用了文本所需的那么多空间！

<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>



    <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>