Bootstrap Footer Copyright и Social Media Icons

Question

Это то, чем я занимаюсь своим мозгом последние пару часов и хотел бы получить некоторую информацию, чтобы помочь мне решить эту проблему. Со следующей строкой я пытаюсь выяснить, как я могу сделать следующее.

На мобильном устройстве только 6 значков социальных сетей помещаются в контейнере на отдельной линии, чтобы покрыть всю ширину окна просмотра.

Только на мобильном устройстве я хотел бы разместить информацию об авторских правах на своей собственной линии, чтобы покрыть всю ширину окна просмотра.

<footer> 
    <div class="container"> 
     <div class="row vcenter"> 
      <div class="pull-left col-lg-4 col-xs-12"> 
       <p>Copyright &copy;2016 by Me</p> 
      </div> 
      <div class="col-lg-4 col-lg-offset-4 col-xs-12"> 
       <div class="pull-right"> 
        <a href="#"><i class="fa fa-behance-square fa-icon"></i></a> 
        <a href="#"><i class="fa fa-linkedin-square fa-icon"></i></a> 
        <a href="#"><i class="fa fa-twitter-square fa-icon"></i></a> 
        <a href="#"><i class="fa fa-skype fa-icon"></i></a> 
        <a href="#"><i class="fa fa-facebook-square fa-icon"></i></a> 
        <a href="#"><i class="fa fa-github-square fa-icon"></i></a> 
       </div> 
      </div> 
     </div> 
    </div> 
</footer> 

Answer 1

Использование CSS медиа запросов для различных размеры видовых экранов для достижения мобильного или другого стиля видового экрана. В дальнейшем я дал родительскому div's авторские права и социальные значки id. Если вы измените размер браузера на менее чем 400 пикселей, оба должны центрировать выравнивание.

@media (max-width: 400px) { 
    #copyright { 
     text-align: center; 
    } 
    #social > div{ 
     display: block; 
     width: 100%; 
     margin: 0 auto; 
     text-align: center; 
    } 
} 

Примечание: Ваши авторские права и социальные медиа дивы уже занимают всю ширину окна просмотра, благодаря классам начальной загрузки. Я не понимаю, почему вы упомянули о том, что они должны быть конкретно на их собственной линии. Вы также можете сами использовать сами классы виджета для просмотра, чтобы изменить стиль.

Другое примечание, Я предлагаю вам больше не использовать поплавки или методы плавающего выравнивания. Используйте что-то вроде flexbox для достижения такого же эффекта. Это более надежно.
Brilliant guide to Flexbox

Answer 2

На ваш первый сНу внутри строки VCENTER удалить col-lg-4 col-xs-12 и заменить его col-xs-6

на второй DIV удалить col-lg-4 col-lg-offset-4 col-xs-12 и заменить col-xs-6