Как добиться следующей компоновки с использованием начальной загрузки

Question

пока это то, что я сделал

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<section class="row">

  <div class="col-xs-12 col-md-2"></div>


  <div class="col-xs-12 col-md-4 blog-post1">
    <img src="./assests/1.png" alt="" />
    <div class="overley-nav">
      <input type="button" value="Travel" />
      <h3>The Complete Guide for Travel in London</h3>
      <p>by MARIE NGUYEN / DECEMBER 13,2016</p>
    </div>
  </div>

  <div class="col-xs-12 col-md-4 blog">

    <div class="blogpost2">
      <img src="./assests/2.png" alt="" />
      <div class="overley-nav2">
        <input type="button" value="Travel" />
        <h4>The Complete Guide</h4>
      </div>
    </div>
    <div class="blogpost3">
      <img src="./assests/3.png" alt="" />
      <div class="overley-nav2">
        <input type="button" value="Travel" />
        <h4>The Complete Guide</h4>
      </div>
    </div>

  </div>



  <div class="col-xs-12 col-md-1"></div>
</section>

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

Answer 1

Вам нужно указать ширину, равную ширине используемого вами изображения, если вы хотите, чтобы текст оставался неподвижным. Вот пример .

Если вы хотите, чтобы изображение находилось внизу текста, просто поместите его под ним .

.overley-nav {
  width: 200px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<section class="row">

  <div class="col-xs-12 col-md-2"></div>


  <div class="col-xs-12 col-md-4 blog-post1">
    <img src="http://static1.purebreak.com/articles/9/15/82/99/@/629110-grumpy-cat-disaster-girl-doge-que-s-200x200-1.jpg" alt="" />
    <div class="overley-nav">
      <input type="button" value="Travel" />
      <h3>The Complete Guide for Travel in London</h3>
      <p>by MARIE NGUYEN / DECEMBER 13,2016</p>
    </div>
  </div>

  <div class="col-xs-12 col-md-4 blog">

    <div class="blogpost2">
      <img src="http://static1.purebreak.com/articles/9/15/82/99/@/629110-grumpy-cat-disaster-girl-doge-que-s-200x200-1.jpg" alt="" />
      <div class="overley-nav">
        <input type="button" value="Travel" />
        <h4>The Complete Guide</h4>
      </div>
    </div>
    <div class="blogpost3">
      <img src="http://static1.purebreak.com/articles/9/15/82/99/@/629110-grumpy-cat-disaster-girl-doge-que-s-200x200-1.jpg" alt="" />
      <div class="overley-nav">
        <input type="button" value="Travel" />
        <h4>The Complete Guide</h4>
      </div>
    </div>

  </div>