Bootstrap（xs）屏幕导航栏不适合col-6和col-6

Question

我为页脚导航栏编写了以下代码。当屏幕小于770px时，导航栏不在6个cols和6个cols与社交。社交图标正在下面排队。这是我的代码：

<div class="row footer">
  <div class="col-xs-6 col-sm-6 col-md-9 col-lg-10">
    <ul class="fontqu">
      <li class="navmenu"><a href="home.html" class="fontqu">HOME</a></li>
      <li class="navmenu"><a href="terms.html"class="fontqu">TERMS</a></li>
      <li class="navmenu"><a href="about.html"class="fontqu">ABOUT</a></li>
      <li class="navmenu"><a href="contact.html"class="fontqu">CONTACT</a></li>
    </ul>
  </div>
  <div class="col-xs-6 col-sm-6 col-md-3 col-lg-2 socials "> 
    <a href="https://play.google.com/store/apps/dev?id=7250687625297133305" target="_blank"><img class="footimg" src="img/playstore.png" alt="playstore"></a>
    <a href="https://www.youtube.com/channel/UCxqUNA0u2I3D5iQcOEii0Eg" target="_blank"><img class="footimg" src="img/youtubelink.png" alt="playstore"></a>
    <a href="https://www.facebook.com/la.applications" target="_blank"><img class="footimg" src="img/facebook40x40.png" alt="playstore"></a>
    <a href="https://plus.google.com/u/0/+Laapps_business/posts" target="blank"><img class="footimg" src="img/gplus-64.png" alt="playstore"></a>
  </div>
</div>

这是屏幕小于750像素的屏幕截图。什么是解决方案，所以我可以在xs屏幕上将其设为导航栏和6个社交图标？

Answer 1

768px以下的任何内容都被视为移动设备视图（在本例中为iPad肖像）。大多数前端开发人员会在移动视图中考虑全宽。因此，您应该考虑2种解决方案中的一种：

1. 转换为其下方菜单和社交内容的全宽级别

   <div class="col-xs-12 col-sm-6 col-md-9 col-lg-10">
      <ul>
         ...
      </ul>
   </div>
   

或

1. 减少该视图的li之间的填充

    @media (max-width: 768px){
      .footer > div ul.fontqu li{
        padding: 5px 10px //adjust accordingly here.
        margin: 0px 5px   //the margin should be adjusted if it's too much
      }
    }
   

底线是，在col-xs-6超出它的分配宽度后，边距和填充量加上li文本大小溢出了你的房地产，以显示它们的内联，从而使它们换行。关键是要使用此处建议的任何技术将它们包裹起来。

下次发布css代码，特别是当您添加css标记

时

玩得开心！