Какая у меня ошибка в отношении реагирования?

Question

Я начал делать свой HTML-код отзывчивым, но у меня проблемы с белым, , например, у моего нижнего колонтитула есть 4 белых фона, я думаю, проблема в том, что я использовал фон для своего нижнего колонтитула, но я не знаю, как сделать его отзывчивым ,

 h4 { 
 

 

 
     font-size: 16px !important; 
 

 

 
     font-family: 'Open Sans', sans-serif; 
 

 

 
     font-weight: bold; 
 

 

 
     color: white; 
 

 

 
     } 
 

 

 
     .font-icon { 
 

 

 
     float: left; 
 

 

 
     color: white !important; 
 

 

 
     padding: 0 15px 0 0; 
 

 

 
     font-size: 25px !important; 
 

 

 
     } 
 

 

 
     .font-icon:hover { 
 

 

 
     color: #80878e !important; 
 

 

 
     } 
 

 

 
     .footercol p { 
 

 

 
     color: white; 
 

 

 
     } 
 

 

 
     .footercol:nth-child(2) span { 
 

 

 
     display: block; 
 

 

 
     } 
 

 

 
     .footercol { 
 

 

 
     float: left; 
 

 

 
     } 
 

 

 
     .footercol li, 
 

 

 
     .footercol span, 
 

 

 
     .footercol a { 
 

 

 
     color: #80878e; 
 

 

 
     font-size: 12px; 
 

 

 
     font-family: arial; 
 

 

 
     line-height: 2.5; 
 

 

 
     } 
 

 

 
     .footercol h4 { 
 

 

 
     padding: 0 0 20px; 
 

 

 
     color: white; 
 

 

 
     font-family: 'Open Sans'; 
 

 

 
     font-size: 16px !important; 
 

 

 
     font-weight: bold; 
 

 

 
     } 
 

 

 
     .footercol li { 
 

 

 
     color: white; 
 

 

 
     margin: 0 0 0 15px; 
 

 

 
     } 
 

 

 
     .footercol a { 
 

 

 
     text-decoration: none; 
 

 

 
     } 
 

 

 
     .footercol a:hover { 
 

 

 
     color: white; 
 

 

 
     }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="footer container-fluid"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="footercol col-lg-3 col-md-4 col-xs-4 col-sm-4"> 
 
     <h4>FOLLOW US</h4> 
 
     <div> 
 
      <span class="icon-facebook font-icon"></span> 
 
      <span class="icon-google-plus font-icon"></span> 
 
      <span class="icon-rss font-icon"></span> 
 
      <span class="icon-social-pinterest font-icon"></span> 
 
      <span class="icon-linkedin font-icon"></span> 
 
     </div> 
 
     </div> 
 
     <div class="footercol col-lg-3 col-md-4 col-xs-4 col-sm-4"> 
 
     <h4>ADDRESS</h4> 
 
     <span>9870 St Vincent Place,</span> 
 
     <span>Glasgow, DC 45 Fr 45.</span> 
 
     <span>Freephone: +1 800 559 6580</span> 
 
     <a href="#">mail@demolink.org</a> 
 
     </div> 
 
     <div class="footercol col-lg-3 col-md-4 col-xs-4 col-sm-4"> 
 
     <h4>SUPPORT MENU</h4> 
 
     <ul> 
 
      <li><a href="#">Lost Password?</a> 
 
      </li> 
 
      <li><a href="#">Forgot your Username?</a> 
 
      </li> 
 
      <li><a href="#">Your Membership</a> 
 
      </li> 
 
      <li><a href="#">Your Account</a> 
 
      </li> 
 
      <li><a href="#">Support Forum</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
     <div class="footercol col-lg-3 col-md-4 col-xs-4 col-sm-4"> 
 
     <h4>ABOUT US</h4> 
 
     <ul> 
 
      <li><a href="#">Customer focus</a> 
 
      </li> 
 
      <li><a href="#">Performance</a> 
 
      </li> 
 
      <li><a href="#">Affiliates</a> 
 
      </li> 
 
      <li><a href="#">CV Review</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

EDIT: Ваша первая проблема заключается в том, что вы используете четыре дивы, содержащие Col-СМ-4 на Col основе сетке 12. 4 * 4 = 16. Это делает ваш последний div «прыгать вниз», когда размер экрана меньше 992 пикселей, если я не ошибаюсь.

Чтобы все было правильно, вам нужно понять, что Bootstrap основан на сетке из 12 столбцов. Например; HTML/разметки:

<div class="container my-footer"> 
     <div class="row"> 
     <div class="col-md-3 col-sm-3 col-xs-12"> 
      <h4>Address:</h4> 
      <ul> 
      <li>Footer stuff</li> 
      <li>Footer stuff</li> 
      <li>Footer stuff</li> 
      </ul> 
     </div> 
     <div class="col-md-3 col-sm-3 col-xs-12"> 
      <h4>Projects:</h4> 
      <ul> 
      <li>Footer stuff</li> 
      <li>Footer stuff</li> 
      <li>Footer stuff</li> 
      </ul> 
     </div> 
     <div class="col-md-3 col-sm-3 col-xs-12"> 
      <h4>About us:</h4> 
      <ul> 
      <li>Footer stuff</li> 
      <li>Footer stuff</li> 
      <li>Footer stuff</li> 
      </ul> 
     </div> 
     <div class="col-md-3 col-sm-3 col-xs-12"> 
      <h4>Contact:</h4> 
      <ul> 
      <li>Footer stuff</li> 
      <li>Footer stuff</li> 
      <li>Footer stuff</li> 
      </ul> 
     </div> 
     </div> 
    </div>