引導響應問題 - 圖像和文本的重疊

Question

當更改互聯網瀏覽器的大小時，一切似乎都響應，直到達到某個窗口大小。展開我的窗口時，我的網站的容器大小將從（944px X 240px）跳躍到（463.5px x 289px）。請幫我弄清楚如何解決重疊問題！

這是個什麼樣子，同時擴大它，它重疊之前：

這是個什麼樣子，同時擴大它，它跳轉到一個小容器和重疊：

如果我繼續擴展它，容器追溯到再次正常尺寸和響應看起來不錯，再次聲明：

這裏是我的代碼：

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

Answer 1

看一看這個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> 

Answer 2

最好的猜測是，你宣佈一個容器容器內和可能引起的問題。如果你給第一次潛水包含所有應該適合你的容器液。我可能會開始得到那個和第二個.row分類div，因爲你想要所有內聯，然後垂直崩潰。