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>

CSS和components-circle的{{1}}：

inner-component

问题是，当我调整浏览器大小时，.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响应时，如何使其不与右侧的对应文本重叠，我该如何插入换行符？

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>

Answer 2

要创建隐藏在较大视口中的断点，可以将这些CSS类与换行符一起使用：

.d-md-none使其在大于md尺寸的屏幕上不可见。

.d-sm-none要将其隐藏在尺寸大于sm的屏幕上。

您可能还需要将row放在container内。

它是这样的：<br class="d-md-none">

如果您想在不使用<br>元素的情况下换行，请签出this guide。

Answer 3

您已经在使用行类，因此只需将width的{{1}}设置为components-circle（而不是使其变为静态）就可以了（因为引导程序将处理其余的响应内容）

要保持高宽比，您必须从100%中删除height并使用components-circle。看看看看它是如何工作的。（padding-top的宽高比为1：1）

在全页视图中打开以下代码段，然后调整大小以查看效果：）

尽管还有其他方法可以达到相同目的，但IMO这是相当简单且可以理解的。

padding-top: 100%

.components-circle {
    display: block;
    margin: 0 auto;
    background-repeat: no-repeat;
    padding-top: 100%;
    width: 100%;
    border-radius: 100%;
    border: 2px solid #e0e0eb;
  }
  .inner-component {
    background: url(https://i.ebayimg.com/images/g/eiMAAOSwH3haAlKl/s-l300.png) no-repeat;
      background-size: contain;
  }

更新：要在调整大小期间将内部图像保持在中心位置，必须将其位置设置为<html> <head> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js" integrity="sha384-u/bQvRA/1bobcXlcEYpsEdFVK/vJs3+T+nXLsBYJthmdBuavHvAW6UsmqO2Gd/F9" crossorigin="anonymous"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> </head> <body> <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> </body> </html>（默认设置），然后在内部图像中添加0px 0px -零件。这将缩放图像以适合父图像。请参阅上面的更新代码段！

Bootstrap CSS：带图像的div与文本重叠的div

3 个答案: