html - 如何使用引导程序 3 实现相对内容框？

Question

我是 bootstrap 和 css 的新手，因为我知道我必须创建两列 4 x 4 才能在一个部分中实现内容框，但是什么会让它看起来像上图一样，并让它在不同的设备中响应。

从昨天开始，我一直在努力，我已经实现了这个目标，但仍然无法使其完美。如图片中所述。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<style>
  .gradient-color {
    background: linear-gradient(to left, #280489 20%, #e24301 100%);
    background-clip: text;
    text-fill-color: transparent;
    color: transparent;
    font-family: "HelveticaNeue";
    font-weight: bold;
  }
  
  .left-btn {
    float: left;
  }
  
  .first {
    position: absolute;
    background-color: white;
    z-index: 4;
    border: 3px solid red;
    border-image: linear-gradient(to left, #280489 0%, #e24301 100%);
    border-image-slice: 1;
    height: auto;
    padding: 52px 60px 64px 49px;
  }
  
  .second {
    position: absolute;
    width: 600px;
    height: 400px;
    right: 200px;
  }
</style>

<div class="container">
  <div class="row">
    <div class="col-sm-12 text-center heading">
      <h1>OUR STORY</h1>
      <div class="smaller-border text-center"></div>
    </div>
  </div>

  <div class="row">
    <div class="col-sm-3 first ">
      <p style="margin-bottom: 40px;">Sajaya Young Ladies was established under the name of Children Centers in 2004, and declared its independence in 2012, to focus on young ladies based on the vision of Her Highness Sheikha Jawaher bint Mohammad Al Qassimi.</p>
      <a class="gradient-btn gradient-color" style="padding: 10px;">More Details</a>
    </div>
    <div class="col-sm-8 second">
      <img src="https://preview.ibb.co/gdt5cK/Image_1.jpg" class="img img-responsive" alt="image">
    </div>

  </div>
</div>

标签： htmlcsstwitter-bootstrap-3