Question

我正在尝试实现以下布局：

我已经能够或多或少地解决两个问题：

列与图像重叠
圆圈不居中。此外，当我在手机上看到这个时，除了其他问题之外，两个圆圈叠加在一起。

这是我的HTML：

<div class="container"> <!-- can't change this -->
  <div class="col-md-8 column"> <!-- can't change this -->
    <!-- can change anything below this -->
    <div class="row">
        <div class="col-md-3">
            <img alt="Some Image" src="http://lorempixel.com/340/340/" />
        </div>
        <div class="col-md-9">
            <div class="row">
                <div class="col-md-12">
                    <p>
                        Lorem ipsum dolor sit amet
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="row">
                        <div class="circle">450
                            <br> reviews </div>
                        <div class="circle">4.2 million
                            <br> readers </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <p>
                Lorem ipsum dolor sit amet
            </p>
        </div>
    </div>
  </div>
</div>

Live Demo

请帮助解决这些问题。

Answer 1

它不一定重叠，在这种特殊情况下，只需给出图像img-responsive类，因此图像的宽度始终最大为100％。

要解决圈子问题，您可以将它们放在col-xs-6内，这样它们就不会叠加在一起。

以下是演示：https://codepen.io/anon/pen/WMEMbW

<div class="container">
   <!-- can't change this -->
   <div class="col-md-8 column">
      <!-- can't change this -->
      <!-- can change anything below this -->
      <div class="row">
         <div class="col-md-3">
            <img alt="Some Image" src="http://lorempixel.com/340/340/" class="img-responsive" />
         </div>
         <div class="col-md-9">
            <div class="row">
               <div class="col-md-12">
                  <p>
                     Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
                  </p>
               </div>
            </div>
            <div class="row">
               <div class="col-md-12">
                  <div class="row">
                     <div class="center-block">
                        <div class="col-xs-6">
                           <div class="circle">450
                              <br> reviews 
                           </div>
                        </div>
                        <div class="col-xs-6">
                           <div class="circle">4.2 million
                              <br> readers 
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div class="row">
         <div class="col-md-12">
            <p>
               Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
            </p>
         </div>
      </div>
   </div>
</div>

Answer 2

我猜你也应该使用一些媒体查询的帮助。

对您分享的演示进行了一些更改。

Updated Demo

<强> CSS

.circle {
  display: inline-flex;    

  justify-content: center;     
  align-items: center;
  text-align: center;

  margin-right: 10px;
  width: 200px;
  height: 200px;
  font-size: 35px;
  border-radius: 50%;
  color: #fef;
  background: #000
}

.img-left {
  max-width: 100%;
}

.circle-wrapper {
  text-align: center;
}

@media (max-width:500px) {
  .circle-wrapper .circle{
     width: 150px;
    height: 150px;
    font-size: 25px;
  }
}

<强> HTML：

<div class="container"> <!-- can't change this -->
  <div class="col-md-8 column"> <!-- can't change this -->
    <!-- can change anything below this -->
    <div class="row">
        <div class="col-md-3">
            <img class="img-left" alt="Some Image" src="http://lorempixel.com/340/340/" />
        </div>
        <div class="col-md-9">
            <div class="row">
                <div class="col-md-12">
                    <p>
                        Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="row circle-wrapper">
                        <div class="circle">450
    <br> reviews </div>
  <div class="circle">4.2 million
    <br> readers </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <p>
                Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
            </p>
        </div>
    </div>
  </div>
</div>

Bootstrap - 列彼此重叠

2 个答案: