为什么在移动设备上查看时，页面右侧出现空白？

Question

我正在使用 Foundation 5 完成我自己公司的网站，它在移动设备上正确显示 phone 直到我开始添加从数据库中提取的投资组合和定价部分。当我去掉这些部分时，一切都正确居中。我正在 iphone 6 plus 上对其进行测试。任何帮助，将不胜感激。

这里是link：http://www.overtheoceanfilms.com/beta/index.php

Answer 1

问题的起因似乎是定价 table 的嵌套。

您当前的定价 table 结构如下所示：

row //row 1
--medium-3 //pricing table
--row //row 2
----medium-3 //pricing table
--row 
row

其中每个定价 table 的直接兄弟是包含定价 table 的 row。这导致右侧出现额外的白色 space。

你想要的结构应该是：

row
--medium-3
--medium-3
--medium-3
--medium-3
row

其中每个定价 table 存在于单个 row 中：

html 结构应如下所示：

<div class="row">
  <div class="large-3 columns">
    <ul class="pricing-table">
      <li class="title-Silver ">Silver Package
      </li>
      <li class="price"> 00 </li>

      <li class="bullet-item"> 2 videographers </li>
      <li class="bullet-item"> Full Ceremony </li>
      <li class="bullet-item"> Full Reception </li>
      <li class="bullet-item"> 1 full length DVD with custom case </li>
      <li class="bullet-item"> Professional audio recording </li>

      <input type="hidden" value="Silver" name="Silver">
      <li class="cta-button"><a class="button" href="#">Contact Us!</a></li>
    </ul>
  </div>
  <div class="large-3 columns">
    <ul class="pricing-table">
      <li class="title-Gold ">Gold Package
      </li>
      <li class="price"> 50 </li>

      <li class="bullet-item"> 2 Videographers </li>
      <li class="bullet-item"> Bride &amp; Groom Morning Preperation </li>
      <li class="bullet-item"> Full Ceremony &amp; Reception </li>
      <li class="bullet-item"> Filming of photoshoot </li>
      <li class="bullet-item"> Highlight Video </li>
      <li class="bullet-item"> 3 custom made DVD's </li>
      <li class="bullet-item"> Professional audio recording </li>

      <input type="hidden" value="Gold" name="Gold">
      <li class="cta-button"><a class="button" href="#">Contact Us!</a></li>
    </ul>
  </div>

  <div class="large-3 columns">
    <ul class="pricing-table">
      <li class="title-Diamond ">Diamond
        <span style="position:absolute; margin-left:-80px; top:-27px;">  <img src="images/BestValue.png" style="height:60px; width:60px"> </span> Package
      </li>
      <li class="price"> 00 </li>

      <li class="bullet-item"> Includes Gold Package </li>
      <li class="bullet-item"> Stabilization Add-On </li>
      <li class="bullet-item"> Free 2 LED lights with stands during reception dancing </li>

      <input type="hidden" value="Diamond" name="Diamond">
      <li class="cta-button"><a class="button" href="#">Contact Us!</a></li>
    </ul>
  </div>

  <div class="large-3 columns">
    <ul class="pricing-table">
      <li class="title-Platinum ">Platinum Package
      </li>
      <li class="price"> 00 </li>

      <li class="bullet-item"> Includes Diamond Package </li>
      <li class="bullet-item"> 3 videographers </li>
      <li class="bullet-item"> Interview with couple </li>
      <li class="bullet-item"> First look reveal (if applicable) </li>
      <li class="bullet-item"> Wish Cam during reception </li>

      <input type="hidden" value="Platinum" name="Platinum">
      <li class="cta-button"><a class="button" href="#">Contact Us!</a></li>
    </ul>
  </div>
</div>

您可以将定价 table 替换为以上内容以解决您的问题。如果您仍然遇到问题，请发表评论。

为什么在移动设备上查看时，页面右侧出现空白？

How come there is a white gap on the right side of the page when viewing on a mobile device?

mobile

centering

zurb-foundation