当显示器是移动的时，引导不需要的空白区域

Question

我在我的网站上使用bootstrap，遇到了一些我似乎无法摆脱的奇怪的空白区域。如果有人遇到这种情况之前它只发生在一些设备Iphone6，Galaxy s4，Galaxy Note 3上。

margin: 0; padding: 0;上有<li>。

 <ul class="nav nav-justified">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">FAQ</a></li>
    <li id="large"><a href="#" id="large" class="play">PLAY</a></li>
    <li><a href="#">Promotions</a></li>
    <li><a href="#">Support</a></li>
  </ul>

这是我对白色空间的意思。

这在大多数设备上都是这样的：

Answer 1

在您的初步问题中，这只是开发人员视图的截图是吗？

我相信当你第一次切换到移动设备模式时，这只是一个渲染错误。

我可以复制它here，然后注意当我切换到iphone 6预览然后再回到S4 (link)时会发生什么，问题自行解决。我对css一无所知，只是刷新了视图，因此我认为它必须是开发工具问题。

如果您希望100％确定您可以通过NodeJS在本地运行类似browserync的内容，然后连接实际的S4或iphone并检查它。或类似browserstack之类的东西，它使用实际操作系统的VM来确保最准确的结果。

Answer 2

您必须在border-top: value;代码中添加border-bottom: value和li才能获得此结果。

这就是我所做的，我检查了页面，并添加了border-bottom：1px solid #fff; border-top：1px solid #fff;对李元素。这对你想要的观点是好的和有希望的。所以你必须在这个位置的ul li标签中添加这种样式。

Answer 3

尝试在custom.css中删除margin-bottom: 0;。

 .nav-justified > li > a {
   padding-top: 15px;
   padding-bottom: 15px;
  /* margin-bottom: 0;*/
   font-weight: bold;
   color: white;
   text-align: center;
   background-color: #14222d; /* Old browsers */
   }