как продолжить текст под изображением в столбце в bootstrap html

Question

Я создаю коробку с bootstrap, например:

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

так как вы видите, что текст выходит из коробки, я хочу, чтобы текст был как продолжение под изображением, что-то вроде ниже:

, поскольку изображение и текст находятся в разных столбцах, я не могу их так выразить, я новичок в bootstrap, может кто-нибудь сказать, пожалуйста, как это сделать sh это. заранее спасибо

Answer 1

Пожалуйста, попробуйте это -

<section class="addons">
    <div class="container">
      <div class="row">
        <div class="col-md-5">
          <div class="addonscard">
            <div class="row">
              <div class="col-md-12">
                <img class="addonsimage" src="img/Android-Lollipop-wallpapers-Google-Now-Wallpaper-2.png" />
                <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>
  </section>

.addonscard {
      width: 100%;
      height: 181px;
      padding: 2%;
      border: 1px solid #efefef;
    }

    .addonsimage {
      width: 50%;
      float: left;
      margin-right: 20px;
    }

    .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;
    }

Answer 2

У вас есть указанная высота c в .addonscard. Если вы задаете указанную c высоту, то вам нужно задать свойство переполнения. Я добавил свойство переполнения в своем ответе. Надеюсь, это поможет.

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

<style>
  .addonscard {
    width: 100%;
    height: auto;
    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>