html - Bootstrap CSS : div with image is overlapping div with text

Question

我有以下四个内部div容器(小图片-文字-小图片-文字):

   <div class="container">
    <div class="col-md-12">
      <div class="row">
        <div class="col-sm-2">
          <div class="components-circle inner-component"></div>
        </div>
        <div class="col-sm-4">
          <h3>Title</h3>
          <p class="description">
            Some ... long ... text
          </p>
        </div>
        <div class="col-sm-2">
          <div class="components-circle inner-component"></div>
        </div>
        <div class="col-sm-4">
          <h3>Title</h3>
          <p class="description">
            Some ... long ... text
          </p>
        </div>
      </div>
    </div>
  </div>

components-circle 和 inner-component 的 CSS:

.components-circle {
  display: block;
  margin: 0 auto;
  background-repeat: no-repeat;
  height: 115px;
  width: 115px;
  border-radius: 100%;
  border: 2px solid #e0e0eb;
}
.inner-component {
  background: url(http://...) no-repeat;
  background-position: 20px 15px;
}

问题是，当我调整浏览器大小时，components-circle 和 inner-component 与它们右侧的文本重叠，这意味着模板没有响应。

如何在调整浏览器大小时插入换行符或使 components-circle 和 inner-component 响应，以便它们不会与相应的文本重叠右侧？

Answer 1

“col-sm-12”div 的内容是否与页面内容重叠，或者图像旁边的文本是否重叠？无论如何，您可以通过这种方式解决这两个问题，使用“容器”或“行”div 并添加用于调整页面大小的 css。

.components-circle {
  display: block;
  margin: 0 auto;
  background-repeat: no-repeat;
  height: 115px;
  width: 115px;
  border-radius: 100%;
  border: 2px solid #e0e0eb;
}
.inner-component {
  background: url(http://...) no-repeat;
  background-position: 20px 15px;
}

.center-text{
  text-align: left;
}

@media (max-width: 765px) {
  .center-text{
    text-align: center;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="col-md-12">
   <div class="row">
     <div class="col-sm-2">
       <div class="components-circle inner-component"></div>
     </div>
     <div class="col-sm-4 center-text">
       <h3>Title</h3>
       <p class="description">
         Some ... long ... text
       </p>
     </div>
     <div class="col-sm-2">
       <div class="components-circle inner-component"></div>
     </div>
     <div class="col-sm-4 center-text">
       <h3>Title</h3>
       <p class="description">
         Some ... long ... text
       </p>
     </div>
   </div>
 </div>
</div>