横穿全屏幕宽度的卡片盒.引导

Question

我如何调整我的‘卡’，使它显示在整个屏幕的宽度？我用的是引导

​

<div class="card">
     
  <h4 style="margin-top: 5px; width: 100%;">{{$tipo->tipo }}</h4> 
  
  </div>

​

​

​

我需要类似于页脚的宽度

Answer 1

如果使用的是最新的引导程序4，则此代码将在整个宽度范围内创建一张卡片：

<div class="card w-100 mt-2">
    <h4>Restaurante</h4> 
</div>

如果仍然存在空白，那么很可能在卡周围的容器div上有填充物，所以您需要删除它。

Answer 2

首先您需要注意的是，card类display是flex in bootstrap.Also card-body有20px padding.So，您需要的第一件事是在card-body中使用p-0，然后将卡体划分为下面代码中的多个row.So：

<div class='card'>
   <div class='card-img-top'>
     <img src='...' />
   </div>
   <div class='card-body p-0'>
     <div class='row mx-0'>
        <div class='col-12 p-2'>
          ...card content
        </div> 
     </div>
     <div class='d-block px-0'>
       <h4>Your footer</h4>
     </div>
   </div>
</div>    

如果你用清晰的图片来看你想要的东西，我会帮你更多，我希望我能帮你。