我使用Foundation 5完成了我自己公司的网站,并且在我开始添加从数据库中提取的产品组合和定价部分之前,它在移动电话上正确显示。当我取消这些部分时,一切都正确居中。我正在iphone 6 plus上进行测试。任何帮助,将不胜感激。
答案 0 :(得分:1)
看起来定价表的嵌套是导致问题的原因。
您当前的定价表结构如下所示:
row //row 1
--medium-3 //pricing table
--row //row 2
----medium-3 //pricing table
--row
row
每个定价表的直接兄弟是包含定价表的row
。这会在右侧产生额外的空白区域。
您想要的结构应该是:
row
--medium-3
--medium-3
--medium-3
--medium-3
row
每个定价表存在于单个row
中:
html结构应如下所示:
<div class="row">
<div class="large-3 columns">
<ul class="pricing-table">
<li class="title-Silver ">Silver Package
</li>
<li class="price"> $1600 </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"> $2250 </li>
<li class="bullet-item"> 2 Videographers </li>
<li class="bullet-item"> Bride & Groom Morning Preperation </li>
<li class="bullet-item"> Full Ceremony & 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"> $2500 </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"> $3000 </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>
您可以使用上述内容替换定价表以解决问题。如果您仍然遇到问题,请发表评论。