引导响应问题 - 图像和文本的重叠

当更改互联网浏览器的大小时，一切似乎都响应，直到达到某个窗口大小。展开我的窗口时，我的网站的容器大小将从（944px X 240px）跳跃到（463.5px x 289px）。请帮我弄清楚如何解决重叠问题！引导响应问题 - 图像和文本的重叠

这是个什么样子，同时扩大它，它重叠之前： enter image description here

这是个什么样子，同时扩大它，它跳转到一个小容器和重叠：

enter image description here

如果我继续扩展它，容器追溯到再次正常尺寸和响应看起来不错，再次声明： enter image description here

这里是我的代码：

<div class="container-fluid"> 
<div class="row" style="margin-bottom: 15px;"> 
    <div class="col-xs-12 col-md-6 col-md-offset-3" > 
     <div class="container-fluid"> 
      <div class="row"> 
       <div class="col-xs-12 col-sm-3 col-sm-offset-1"> 
        <img src="/assets/img/blank_avatar.jpg" style="width: 200px; height: 200px;" class="img-circle"/> 
       </div> 
       <div class="col-xs-12 col-sm-8"> 
        <div class="container-fluid"> 
         <div class="row"> 
          <div class="col-xs-12 col-sm-6"> 
           <h2>Title</h2> 
           <h4>Testing header here</h4> 
           <h4>Testing header here</h4> 
          </div> 
          <div class="col-xs-12 col-sm-6"> 
           <ul> 
            <li> 
             <a href="#"> 
              <span>Face</span> 
              <i class="icon-grin"></i> 
             </a> 
            </li> 
            <li> 
             <a href="#"> 
              <span>Face</span> 
              <i class="icon-neutral"></i> 
             </a> 
            </li> 
            <li> 
             <a href="#"> 
              <span>Star</span> 
              <i class="fa fa-star"></i> 
             </a> 
            </li> 
           </ul> 
           <a class="btn btn-default btn" href="#"> 
            <i class="icon-neutral"></i>test 
           </a> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

来源

2015-05-29 tania_s

看一看这个Fiddle。
我认为它现在可以像你期望的那样工作。
我在div上删除了一些引导程序类，并将div中的类放在我删除的div以下。并添加了全套课程。如果您只是使用较小的类，则可能会在调整大小时失去控制权。

现在，当你调整它看起来工作正常。

<div class="container-fluid"> 
<div class="row" style="margin-bottom: 15px;"> 
    <div class="col-lg-6 col-lg-offset-3 col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1" > 
     <div class="container-fluid"> 
      <div class="row"> 
       <div class="col-lg-6 col-md-6 col-sm-6"> 
        <img src="https://lh3.googleusercontent.com/-wcJ9gRjTTRY/AAAAAAAAAAI/AAAAAAAAAAA/XuTCJHDodX4/photo.jpg" style="width: 200px; height: 200px;" class="img-circle"/> 
       </div> 
        <div class="container-fluid col-lg-6 col-md-6 col-sm-6"> 
         <div class="row"> 
          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> 
           <h2>Title</h2> 
           <h4>Testing header here</h4> 
           <h4>Testing header here</h4> 
          </div> 
          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 block"> 
           <ul> 
            <li> 
             <a href="#"> 
              <span>Face</span> 
              <i class="icon-grin"></i> 
             </a> 
            </li> 
            <li> 
             <a href="#"> 
              <span>Face</span> 
              <i class="icon-neutral"></i> 
             </a> 
            </li> 
            <li> 
             <a href="#"> 
              <span>Star</span> 
              <i class="fa fa-star"></i> 
             </a> 
            </li> 
           </ul> 
           <a class="btn btn-default btn" href="#"> 
            <i class="icon-neutral"></i>test 
           </a> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

来源

2015-05-29 06:11:21 AngularJR

完美！非常感谢你，我知道我必须犯错误，但不知道要删除或添加什么来纠正这种情况。对此，我真的非常感激！ –

最好的猜测是，你宣布一个容器容器内和可能引起的问题。如果你给第一次潜水包含所有应该适合你的容器液。我可能会开始得到那个和第二个.row分类div，因为你想要所有内联，然后垂直崩溃。

来源

2015-05-29 02:27:06 syrano

引导响应问题 - 图像和文本的重叠

回答

相关问题