如何使用Bootstrap在图像周围包装文本？

Question

我想在图片周围包装文字，如下所示：

我该怎么办？...

我将非常感谢这些信息。谢谢大家。

Answer 1

您可以在相对定位的容器中使用position: absolute，并使用top和left属性对齐它。

.img-circle-wrap {
  position: relative;
  width: 500px;
  height: 500px;
}
.img-circle {
  position: absolute;
  left: 30%;
  top: 30%;
}
.img-circle-wrap span {
  position: absolute;
}
.text-1 {
  top: 20%;
  left: 20%;
}
.text-2 {
  top: 20%;
  left: 70%;
}
.text-3 {
  top: 50%;
  left: 10%;
}
.text-4 {
  top: 50%;
  left: 80%;
}
.text-5 {
  top: 80%;
  left: 20%;
}
.text-6 {
  top: 80%;
  left: 70%;
}
.text-7 {
  top: 20%;
  left: 45%;
}
.text-8 {
  top: 80%;
  left: 45%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="img-circle-wrap">
  <img src="http://placehold.it/200x200" alt="..." class="img-circle">
  <span class="text-1">Text 1</span>
  <span class="text-2">Text 2</span>
  <span class="text-3">Text 3</span>
  <span class="text-4">Text 4</span>
  <span class="text-5">Text 5</span>
  <span class="text-6">Text 6</span>
  <span class="text-7">Text 7</span>
  <span class="text-8">Text 8</span>
</div>

Answer 2

<div class="container">
  <div class="row">
     <div class="col-sm-12">
        <div class="col-sm-6">  
          Text here
        </div>
        <div class="col-sm-6">  
          Text here
        </div>   
        <div class="col-sm-3">  
          Text here
        </div>  
        <div class="col-sm-6">  
          <img src="img.jpg" class="img-responsive"/>
        </div>    
        <div class="col-sm-3">  
          Text here
        </div> 

        <div class="col-sm-6">  
          Text here
        </div>
        <div class="col-sm-6">  
          Text here
        </div>   

        <div class="col-sm-6">  
          Text here
        </div>
        <div class="col-sm-6">  
          Text here
        </div>   `enter code here`
     </div>
  </div>
</div>