Проблема с начальной загрузкой - перекрытие изображения и текста

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 classed div, так как вы хотите иметь все встроенное, а затем рушиться вертикально.