我刚刚使用基础的新flex-box选项构建了一个站点。除了在移动设备上观看外，它的效果非常好。出于某种原因，该列在iphone 5上延伸到340px，例如即使行是320px。我可以添加溢出：隐藏到行但我认为错过了点
继承代码
<div class="container">
<!-- HEADER -->
<header class="row align-middle">
<div class="columns logo small-12 js-click-effect-again"><i class="fa fa-fighter-jet" aria-hidden="true"></i></i></div>
<nav class="columns main-nav" role="navigation">
<ul class="row main-nav-list medium-unstack medium-collapse">
<li class="columns"><a href="products.html">Products</a></li>
<li class="columns"><a href="news.html">News</a></li>
<li class="columns"><a href="about.html">About</a></li>
<li class="columns"><a href="contact">Contact</a></li>
</ul>
</nav>
</header>
<main role="main">
<div class="row">
<div class="hero-banner columns">
<img class="hero-image" src="../DIST/images/banner.jpg">
<div class="hero-banner-text">
<h1>Qui autem esse poteris, nisi te amor ipse ceperit?</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur deinde Metrodori liberos commendas? Sed ea mala virtuti magnitudine obruebantur. Sed mehercule pergrata mihi oratio tua. Et ille ridens: Video, inquit, quid agas; Nam Metrodorum non puto ipsum professum, sed, cum appellaretur ab Epicuro, repudiare tantum beneficium noluisse; Duo Reges: constructio interrete. Qui igitur convenit ab alia voluptate dicere naturam proficisci, in alia summum bonum ponere? Nihil ad rem! Ne sit sane; </p>
<a class="js-overlay-trigger" href="#">Overlay</a>
</div>
</div>
</div>
<div class="medium-unstack row">
<div class="columns tile">
<img src="http://placehold.it/320x150/3B0D0B/fff">
<h2 class="tile-title">
Some title copy
</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ita prorsus, inquam; Minime vero istorum quidem, inquit. Qualem igitur hominem natura inchoavit? Duo Reges: constructio interrete. </p>
<a class="button" href="">A link</a>
</div>
<div class="columns tile">
<img src="http://placehold.it/320x150/E8C0A8/fff">
<h2 class="tile-title">
Some title copy
</h2>
<p>Nihil illinc huc pervenit. Eam stabilem appellas. Bonum patria: miserum exilium. Quae diligentissime contra Aristonem dicuntur a Chryippo. Occultum facinus esse potuerit, gaudebit; Confecta res esset. </p>
<a class="button" href="">A link</a>
</div>
<div class="columns tile">
<img src="http://placehold.it/320x150/63649E/fff">
<h2 class="tile-title">
Some title copy
</h2>
<p>Hoc loco tenere se Triarius non potuit. Igitur ne dolorem quidem. At iam decimum annum in spelunca iacet. Dat enim intervalla et relaxat. Respondeat totidem verbis. Atqui reperies, inquit, in hoc quidem pertinacem; </p>
<a class="button" href="">A link</a>
</div>
</div>
<div class="text-block row">
<div class="columns">
<div class="text-block-content">
<h3>Verba tu fingas et ea dicas, quae non sentias?</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. An ea, quae per vinitorem antea consequebatur, per se ipsa curabit? Si alia sentit, inquam, alia loquitur, numquam intellegam quid sentiat</p>
</div>
</div>
</div>
</main>
<footer class="main-footer row">
<div class="columns">
<div class="row">
<div class="columns">
<div class="footer-group accordion js-accordion">
<h4 class="footer-group-title accordion-trigger js-accordion-trigger">Group title<i class="fa fa-chevron-circle-down" aria-hidden="true"></i></h4>
<ul class="footer-list accordion-content js-accordion-content">
<li><a href="#">A footer link</a></li>
<li><a href="#">A footer link</a></li>
<li><a href="#">A footer link</a></li>
<li><a href="#">A footer link</a></li>
</ul>
</div>
</div>
<div class="columns">
<div class="footer-group accordion js-accordion">
<h4 class="footer-group-title accordion-trigger js-accordion-trigger">Group title<i class="fa fa-chevron-circle-down" aria-hidden="true"></i></h4>
<ul class="footer-list accordion-content js-accordion-content">
<li><a href="#">A footer link</a></li>
<li><a href="#">A footer link</a></li>
<li><a href="#">A footer link</a></li>
<li><a href="#">A footer link</a></li>
</ul>
</div>
</div>
<div class="columns">
<div class="footer-group accordion js-accordion">
<h4 class="footer-group-title accordion-trigger js-accordion-trigger">Group title<i class="fa fa-chevron-circle-down" aria-hidden="true"></i></h4>
<ul class="footer-list accordion-content js-accordion-content">
<li><a href="#">A footer link</a></li>
<li><a href="#">A footer link</a></li>
<li><a href="#">A footer link</a></li>
<li><a href="#">A footer link</a></li>
</ul>
</div>
</div>
<div class="columns">
<div class="footer-group accordion js-accordion">
<h4 class="footer-group-title accordion-trigger js-accordion-trigger">Group title<i class="fa fa-chevron-circle-down" aria-hidden="true"></i></h4>
<ul class="footer-list accordion-content js-accordion-content">
<li><a href="#">A footer link</a></li>
<li><a href="#">A footer link</a></li>
<li><a href="#">A footer link</a></li>
<li><a href="#">A footer link</a></li>
</ul>
</div>
</div>
</div>
<span class="columns copyright align-bottom">©2016</span>
</div>
</footer>
</div>
我使用默认基础并没有添加任何内容来覆盖它，所以我无法弄清楚发生了什么？我错过了什么
答案 0 :(得分：0)
这里没有看到任何“错误”，但我没有CSS。我设置了一个演示，你可以添加你的CSS，分叉它，回发链接http://codepen.io/rafibomb/pen/RojaGW
btw：你不需要第二组列
<nav class="columns main-nav" role="navigation">