如何使用Bootstrap响应式实现以下布局

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

如果希望文本“保持静止”，则需要指定一个与所使用图像一样大的宽度。 Here is an example。

如果您希望图像位于文本的底部，只需put it's div underneath it。

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