Bootstrap CSS footer вопрос настройки

Question

У меня возникли проблемы с получением правильного стиля для моего нижнего колонтитула. Мне удалось получить правильный стиль для мобильных устройств, но для планшетных компьютеров и настольных компьютеров у меня возникло несколько проблем. Я пытаюсь, чтобы социальные значки располагались горизонтально по правому краю нижнего колонтитула. Я не уверен, почему у вас текущее заданное местоположение. Любая помощь в этом будет полезной.

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

enter link description here

 <footer> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-xs-12 col-sm-6"> 
        <p class="copyright text-muted">Copyright &copy; Eat Sleep Kayak 2015</p> 
       </div> 
       <div class="footersocialicons col-xs-12 col-sm-6"> 
        <ul class="list-inline"> 
         <li> 
          <a href="#"> 
           <span class="fa-stack fa-lg"> 
            <i class="fa fa-circle fa-stack-2x"></i> 
            <i class="fa fa-facebook fa-stack-1x fa-inverse"></i> 
           </span> 
          </a> 
         </li> 
         <li> 
          <a href="#"> 
           <span class="fa-stack fa-lg"> 
            <i class="fa fa-circle fa-stack-2x"></i> 
            <i class="fa fa-twitter fa-stack-1x fa-inverse"></i> 
           </span> 
          </a> 
         </li> 
         <li> 
          <a href="#"> 
           <span class="fa-stack fa-lg"> 
            <i class="fa fa-circle fa-stack-2x"></i> 
            <i class="fa fa-google fa-stack-1x fa-inverse"></i> 
           </span> 
          </a> 
         </li> 
         <li> 
          <a href="#"> 
           <span class="fa-stack fa-lg"> 
            <i class="fa fa-circle fa-stack-2x"></i> 
            <i class="fa fa-youtube fa-stack-1x fa-inverse"></i> 
           </span> 
          </a> 
         </li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </footer>  

/* Footer */ 
    @media (max-width:768px){ 
     footer {text-align: center; padding: 5px;} 
    } 

    @media (min-width: 769px) { 
     footer .list-inline { 
      float: right; 
      position:relative;top:50% ; 
      transform:translateY(-50%); 
     } 
     footer .copyright { 
      float: left; 
     } 
    } 

    footer { 
     font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; 
     /*background-color: #eee;*/ 
     background-color: #6B6A67; 
     padding-top: 5px; 
    } 

    footer .copyright { 
     font-size: 14px; 
    } 

    footer .list-inline { 
     height: 100%; 
    } 

Answer 1

Добавьте класс .text-center к этой линии - <div class="footersocialicons col-xs-12 col-sm-6"> центрировать все внутри.

Answer 2

Попробуйте добавить фиксированную высоту и line-height в нижнем колонтитуле. Вы также сказали, что хотите, чтобы значки были справа, поэтому вы добавляете класс .text-right для этого.

Следующие центры нижнего колонтитула и значки горизонтально и выравнивают значки справа.

<style> 
    footer { 
     height: 60px; 
     line-height: 60px; 
    } 
</style> 


<footer> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-xs-12 col-sm-6"> 
       <p class="copyright text-muted">Copyright &copy; Eat Sleep Kayak 2015</p> 
      </div> 
      <div class="footersocialicons col-xs-12 col-sm-6 text-right"> 
       <ul class="list-inline"> 
        <li> 
         <a href="#"> 
          <span class="fa-stack fa-lg"> 
           <i class="fa fa-circle fa-stack-2x"></i> 
           <i class="fa fa-facebook fa-stack-1x fa-inverse"></i> 
          </span> 
         </a> 
        </li> 
        <li> 
         <a href="#"> 
          <span class="fa-stack fa-lg"> 
           <i class="fa fa-circle fa-stack-2x"></i> 
           <i class="fa fa-twitter fa-stack-1x fa-inverse"></i> 
          </span> 
         </a> 
        </li> 
        <li> 
         <a href="#"> 
          <span class="fa-stack fa-lg"> 
           <i class="fa fa-circle fa-stack-2x"></i> 
           <i class="fa fa-google fa-stack-1x fa-inverse"></i> 
          </span> 
         </a> 
        </li> 
        <li> 
         <a href="#"> 
          <span class="fa-stack fa-lg"> 
           <i class="fa fa-circle fa-stack-2x"></i> 
           <i class="fa fa-youtube fa-stack-1x fa-inverse"></i> 
          </span> 
         </a> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</footer> 

Fiddle: http://jsfiddle.net/timgavin/mas4dg0y/