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

【问题标题】：Bootstrap CSS: div with image is overlapping div with textBootstrap CSS：带图像的 div 与文本重叠 div
【发布时间】：2018-06-29 21:47:44
【问题描述】：

我有以下四个内部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 响应时插入换行符，以免它们与右侧的相应文本重叠？

【问题讨论】：

您在响应式框架中使用静态宽度。将宽度设置为%，高度应保持在约束范围内。
您可以将一个引导类添加到两列，例如 [w3schools.com/code/tryit.asp?filename=FSSB6WJIE42Y]
另外，您在中等大小的md 列中有小尺寸sm 行/列。这也会导致问题。
@Gezzasa：我无法更改width，因为这是一个圆形，然后设计就被破坏了——我也改成了col-sm-12（没有结果）。谢谢。
@chevallier 如果您仅编辑宽度，图像将保持约束。

标签： html css twitter-bootstrap bootstrap-4

【解决方案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>

【讨论】：

抱歉，我没有提到它，但我已经使用容器<div class="container"> 来包装所有内容。所以它对我没有帮助:(与text-align: left (or center);相同
它只与文本内容重叠。
除了这些之外，您还使用其他类吗？您能否发送一个打印屏幕，以便我准确检查问题所在？

【解决方案2】：

您已经在使用 row 类，因此只需将 components-circle 的 width 设置为 100%（而不是使其成为静态）即可（因为引导程序将处理其余的响应式内容）。

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

在整页视图中打开下面的sn-p并调整大小以查看效果:)

虽然可以有其他方法来达到同样的效果，但 IMO 这个方法非常简单易懂。

.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（这是默认值）并将background-size: contain 添加到内部组件中。这将缩放图像以适合父级。见上面更新的sn-p！

【讨论】：

很遗憾我无法更改width，因为这是一个圆形，然后设计就被破坏了。
是的，这就是为什么我提到了保持aspect-ratio 1:1的方法，这样可以保持圆圈不变，那么问题是什么？
+1 - 你是对的，我的错。但是：我的背景图像不再停留在圆的确切中心 - 当我调整浏览器大小时，它会移动到不同的位置。因此，如果您帮助我使背景图像始终保持在圆圈的中心，这将是公认的答案:)
@chevallier 我已经更新了答案和代码sn-p，见末尾update :)

【解决方案3】：

要在较大的视口上创建一个隐藏的断点，您可以使用这些带有换行符的 CSS 类：

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

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

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

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

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

【讨论】：

这是一个很酷的提示，谢谢，但我更喜欢仅使用 CSS 来解决它，而不是使用 <br> 元素。