如何在引导html中的列中的图像下继续文本

我正在创建一个带有引导程序的盒子,如下所示:

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

<style>
  .addonscard {
    width: 100%;
    height: 181px;
    padding: 2%;
    border: 1px solid #efefef;
  }
  
  .addonsimage {
    width: 100%;
  }
  
  .add-on-add-unit {
    color: #30ac15;
    border: 1px solid #30ac15;
  }
  
  .add-on-add-unit {
    font-size: 14px;
    line-height: 20px;
    padding: 2px 12px 2px 10px;
    border-radius: 10px;
    display: inline-block;
  }
  
  .add-on-add-unit {
    color: #30ac15;
    border: 1px solid #30ac15;
  }
  
  .addonsdesc {
    font-size: 13px;
  }
</style>


<section class="addons">

  <div class="container">

    <div class="row">

      <div class="col-md-5">
        <div class="addonscard">
          <div class="row">
            <div class="col-md-4">
              <img class="addonsimage" src="test1.jpg" />
            </div>
            <div class="col-md-8">
              <h4>This is Heading</h4>
              <p>Price</p>
              <a href="" class="add-on-add-unit">+ Add</a>
              <p class="addonsdesc">Standard photography at best value to turn make lifetime memories from your party. Photographer will be available for maximum 3 hours. 150 - 200 soft copies will be delivered through CD within 10 working days from the event date.</p>
            </div>
          </div>
        </div>

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

如您所见,文本开箱即用,我希望文本像image一样的延续,如下所示:

enter image description here

因为图像和文本都在不同的列上,所以不能这样说,是引导程序的新手,有人可以告诉我如何做到这一点。提前致谢

评论
  • 拉勾勾
    拉勾勾 回复

    您在.addonscard中有特定的高度。如果要指定特定的高度,则必须设置溢出属性。我在答案中添加了溢出属性。 希望这可以帮助。

    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    
    <style>
      .addonscard {
        width: 100%;
        height: 181px;
        padding: 2%;
        border: 1px solid #efefef;
        overflow:auto;
      }
      
      .addonsimage {
        width: 100%;
      }
      
      .add-on-add-unit {
        color: #30ac15;
        border: 1px solid #30ac15;
      }
      
      .add-on-add-unit {
        font-size: 14px;
        line-height: 20px;
        padding: 2px 12px 2px 10px;
        border-radius: 10px;
        display: inline-block;
      }
      
      .add-on-add-unit {
        color: #30ac15;
        border: 1px solid #30ac15;
      }
      
      .addonsdesc {
        font-size: 13px;
      }
    </style>
    
    
    <section class="addons">
    
      <div class="container">
    
        <div class="row">
    
          <div class="col-md-5">
            <div class="addonscard">
              <div class="row">
                <div class="col-md-4">
                  <img class="addonsimage" src="test1.jpg" />
                </div>
                <div class="col-md-8">
                  <h4>This is Heading</h4>
                  <p>Price</p>
                  <a href="" class="add-on-add-unit">+ Add</a>
                  <p class="addonsdesc">Standard photography at best value to turn make lifetime memories from your party. Photographer will be available for maximum 3 hours. 150 - 200 soft copies will be delivered through CD within 10 working days from the event date.</p>
                </div>
              </div>
            </div>
    
          </div>
        </div>
      </div>