Question

如图所示，我需要在卡之间留出空间，如何增加间距以使结构保持不变

<div class="container" style="padding: 16px;">
                  
  <div class="row">
    <div class="center">
      <div class="card text-white bg-primary mb-r"  style="width:100px;height:100px;margin: auto;">
         <div class="card-body">
           <h4 class="card-title">DEL</h4>
           <h7 class="card-text" style="align-content:flex-end">916</h7>   
          </div>
        </div>
      </div>
      <div class="center">
        <div class="card text-white bg-primary mb-r"  style="width:100px;height:100px;margin: auto;">
           <div class="card-body">
            <h4 class="card-title">DEL</h4>
            <h7 class="card-text" style="align-content:flex-end">916</h7>   
            </div>
         </div>
       </div>
       <div class="center">
          <div class="card text-white bg-primary"  style="width:100px;height:100px;margin: auto;">
            <div class="card-body">
              <h4 class="card-title">DEL</h4>
              <h7 class="card-text" style="align-content:flex-end">916</h7>   
             </div>
           </div>
        </div>
        <div class="center">
          <div class="card text-white bg-primary"  style="width:100px;height:100px;margin: auto;">
             <div class="card-body">
                <h4 class="card-title">DEL</h4>
                <h7 class="card-text" style="align-content:flex-end">916</h7>   
              </div>
           </div>
        </div>
       </div>
     </div>

下面的图片是我编写的代码，我需要在它们之间留出间距。

Answer 1

要在卡之间保持间距，只需使用标准的Bootstrap布局即可，即使用行和列。默认情况下，列具有装订线。了解更多：https://getbootstrap.com/docs/4.3/layout/overview/

有很多错误，例如<h7>标签，使用错误的CSS属性等。只需检查一下我的代码，看看我所做的更改。

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

<div class="container">    
  <div class="row">
    <div class="col-3">
      <div class="card w-100 text-white bg-primary">
        <div class="card-body">
          <h4 class="card-title">DEL</h4>
          <h6 class="card-text">916</h6>   
        </div>
      </div>
    </div>
    <div class="col-3">
      <div class="card w-100 text-white bg-primary">
        <div class="card-body">
          <h4 class="card-title">DEL</h4>
          <h6 class="card-text">916</h6>   
        </div>
      </div>
    </div>
    <div class="col-3">
      <div class="card w-100 text-white bg-primary">
        <div class="card-body">
          <h4 class="card-title">DEL</h4>
          <h6 class="card-text">916</h6>   
        </div>
      </div>
    </div>
    <div class="col-3">
      <div class="card w-100 text-white bg-primary">
        <div class="card-body">
          <h4 class="card-title">DEL</h4>
          <h6 class="card-text">916</h6>   
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

我知道您要求结构没有变化，但是我认为需要进行一些编辑，这是一个jsFiddle，其中包含一些建议：https://jsfiddle.net/kcozqd9L/2/

CSS

.container{
  padding: 16px;
 }

.card{
  position: relative;
  display: inline-block;

  width:100px;
  height:100px;
  margin: auto;
 }

/*.card-body{
}

.card-title{
}*/

.card-text{
 align-content:flex-end
}

HTML

 <!-- 
  Bootstrap docs: https://getbootstrap.com/docs
 -->

<div class="container">   
  <div class="row">
   <div class="center">

   <div class="card text-white bg-primary mb-r">
     <div class="card-body">
      <h4 class="card-title">DEL</h4>
      <h6 class="card-text">916</h6>   
     </div>
   </div>

    <div class="card text-white bg-primary mb-r">
     <div class="card-body">
      <h4 class="card-title">DEL</h4>
      <h6 class="card-text">916</h6>   
     </div>
    </div>

     <div class="card text-white bg-primary">
      <div class="card-body">
       <h4 class="card-title">DEL</h4>
       <h6 class="card-text">916</h6>   
      </div>
     </div>

      <div class="card text-white bg-primary">
       <div class="card-body">
        <h4 class="card-title">DEL</h4>
        <h6 class="card-text">916</h6>   
       </div>
     </div>

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

如何增加卡之间的间隙

2 个答案: