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

时间:2018-06-29 11:59:44

标签: html css twitter-bootstrap bootstrap-4

我有以下四个内部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>

CSScomponents-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-componentcomponents-circle响应时,如何使其不与右侧的对应文本重叠,我该如何插入换行符?

3 个答案:

答案 0 :(得分:2)

“ 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>

答案 1 :(得分:1)

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

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

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

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

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

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

答案 2 :(得分:1)

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

要保持高宽比,您必须从100%中删除height并使用components-circle。看看enter image description here看看它是如何工作的。 (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 -零件。这将缩放图像以适合父图像。请参阅上面的更新代码段!