时间戳

首页 > 解决方案 > 如何使用引导响应实现以下布局

jquery - 如何使用引导响应实现以下布局

问题描述

布局

到目前为止，这就是我所做的

<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 通过使用这种技术分配了一些列数，当我缩小浏览器窗口时，我的图像和文本不会自行调整它们。

标签： jqueryhtmlcssbootstrap-4

解决方案

如果您希望文本“保持静止”，则需要指定与您正在使用的图像一样大的宽度。这是一个例子。

如果您希望图像位于文本的底部，只需将其 div 放在它的下方即可。

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

推荐阅读