如何使 Zurb Foundation 5.5.3 在 iPhone 6 Plus 和 Nexus 6 中正确显示而不显示左右截断的文本？
How to make Zurb Foundation 5.5.3 properly display in iPhone 6 Plus and Nexus 6 and not show text cut off on right and left?
我正在使用 Zurb 5.5.3 和 Modernizr v2.8.3。 - 我正在使用 CSS 并且不想使用 SASS.
下面是 http://iprobesolutions.com/event-support/conference-interpreters 的两张 Browerstack 屏幕截图，一张是 iPhone 6 plus，另一张是 Google Nexus 6。
有人能告诉我如何逐步修复左右边距，以便下一个不靠在移动设备的边缘吗？它在我在 Browserstack 中测试的各种其他媒体屏幕上也有同样的问题。
我从来源中找到了以下文献：https://zurb.com/university/lessons
/change-foundation-s-default-breakpoints 但我不明白我实际上应该做什么...我认为 Foundation 会自动调整移动大小...
If you take a content-first approach, measure in ems or rems.
>$row-width: rem-calc(1000);
>$column-gutter: rem-calc(30);
>$total-columns: 12;
因为我有内容编辑权限，所以我可能更喜欢内容优先的方法，但我不知道该做什么，我应该在哪里添加媒体查询以及哪些媒体查询使用 CSS.
[
[
<!doctype html>
<html class="no-js" lang="en-us"> <!--remove the "-us"? -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Established in New York City in 2001, iProbe remains a founder led business offering first class service and support">
<title>Conference Interpreters| iProbe Live Event Support Services</title>
<link rel="stylesheet" href="/css/foundation.css">
<link rel="stylesheet" href="/css/foundation-footer.css"> <!-- Must add #relative_template_path# -->
<link rel="stylesheet" href="/css/foundation-features.css">
<link rel="stylesheet" href="/css/foundation-article-card.css">
<link rel="stylesheet" href="/css/custom.css">
<link href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet">
<!-- <link rel="icon" sizes="32x32" type="image/vnd.microsoft.icon" href="/favicon_32x32.ico"/> -->
<script src="/js/vendor/modernizr.js"></script>
<script src="https://use.typekit.net/jsu5jyh.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
</head>
<body>
<div class="row">
<!-- Header and Nav -->
<header>
<!--#include file="/scripts/tools/top-bar-nav.html" -->
</header>
<!-- End Header and Nav -->
<!-- START Breadcrumbs -->
<div class="row">
<div class="large-12 columns">
<div>
<nav id="breadcrumbs" class="breadcrumbs">
<a href="/">Home</a>
<a href="/live-event-services">Live Event Services</a>
<a class="current" href="/event-support/conference-interpreters">Conference Interpreters</a>
</nav>
</div>
</div>
</div>
<!-- END Breadcrumbs -->
<div class="row">
<section class="large-12 columns">
<h1>our interpretation services</h1>
<p class="marketing">we offer interpreters for conferences, seminars and other live events:</p>
<ul>
<li>A pool of highly qualified interpreters</li>
<li>Professional sourcing and recruitment tools</li>
<li>A selection process to qualify interpreters </li>
<li>Expertise in interpretation standards, techniques and best practices</li>
<li>A technical understanding of language distribution systems</li>
</ul>
<h2>service</h2>
<p>Our interpretation terms of service encompass the following:</p>
<ul>
<li>qualified interpreters will be assigned to fit the specific event requirements</li>
<li>our interpreter coordinator or project manager will promote working conditions to allow for optimal performance of the interpreters</li>
<li>our project manager will stay informed of audio visual technical specifications that are required for multilingual meetings</li>
<li>when dealing with third party stakeholders, we will collaborate representing your best interest in the creation of a successful event.</li>
</ul>
<p>as a professional interpretation service provider we specialize in providing interpreters for corporate meetings. We also provide <a href="/film-tv-production-support/interpreters">interpreters for Film and TV production</a>.</p>
<p>we offer the benefit of fifteen years industry experience providing first rate interpreters for a variety of bilingual and multilingual meetings, conferences and other events.</p>
</section>
</div>
<div class="row">
<section class="small-12 medium-8 columns">
<h1>our guarantee: skilled accredited interpreters for your event</h1>
<p class="name">iProbe's interpreters have either a professional or para-professional level of accreditation authorities</p>
<p>professional interpreters are bound by a strict code of ethics covering confidentiality, impartiality, accuracy and reliability, and have completed training and assessment to certify that they have level of linguistic competence.
</p>
<p>our selection process to secure quality conference interpreters for our clients takes into account the language combination, the subject matter, work experience, current and past employers, membership at professional associations, education and aptitude for the assignment. The interpreter is evaluated on the required technique (consecutive, simultaneous, whispering) and experience in similar environments. We understand the importance of the interpreter’s performance and we spare no effort to ensure that the interpreters we provide have the necessary training and experience to satisfy our clients’ needs.
</p>
</section>
<div class="row">
<section class="small-12 medium-4 columns">
<div id="sidebar" class="events-press-cta panel sticky">
<h1 class="subheader">prefer to book interpreters yourself?</h1>
<p>if you prefer to keep the interpreter selection inhouse, you can book the interpreters yourself and still avail yourself of our <a href="/rentals/interpretation-equipment">simultaneous interpretation equipment rentals</a> to distribute the languages.</p>
<p>for suggestions on how to find the best simultaneous interpreters for your corporate events, conferences and conventions in and outside the United States, feel free to refer to our Interpreter Recruitment Guide <strong>(link coming soon).</strong>
</p>
</div>
</section>
</div>
</div>
<div class="row">
<div class="small-12 medium-8 columns">
<div class="panel">
<p>let us help you to select the right interpreters. Contact our interpretation specialists.</p>
<p><i class="fi-telephone"></i>+1-212-489-6035</p>
<p><i class="fi-mail"></i><a href="mailto:info@iprobesolutions.com">info@iprobesolutions.com</a></p>
<!-- <p class="button">Call <b>212-489-6035</b></p> -->
</div>
</div>
</div>
<!--#include file="/scripts/tools/aside-ad-rentals.html" -->
</div>
<!--#include file="/scripts/tools/footer.html" -->
<script src="/js/vendor/jquery.js"></script>
<script src="/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
直接在 .row 中使用 .row 不是一个好主意，删除 .row 将解决问题。
<body>
<div class="row">
好办法：
<div class="row">
<div class="columns">
<div class="row">
<div class="columns"></div>
</div>
</div>
</div>
错误方式：
<div class="row">
<div class="row">
<div>
<div class="columns"></div>
</div>
</div>
</div>
我正在使用 Zurb 5.5.3 和 Modernizr v2.8.3。 - 我正在使用 CSS 并且不想使用 SASS.
下面是 http://iprobesolutions.com/event-support/conference-interpreters 的两张 Browerstack 屏幕截图，一张是 iPhone 6 plus，另一张是 Google Nexus 6。
有人能告诉我如何逐步修复左右边距，以便下一个不靠在移动设备的边缘吗？它在我在 Browserstack 中测试的各种其他媒体屏幕上也有同样的问题。
我从来源中找到了以下文献：https://zurb.com/university/lessons /change-foundation-s-default-breakpoints 但我不明白我实际上应该做什么...我认为 Foundation 会自动调整移动大小...
If you take a content-first approach, measure in ems or rems.
>$row-width: rem-calc(1000);
>$column-gutter: rem-calc(30);
>$total-columns: 12;
因为我有内容编辑权限，所以我可能更喜欢内容优先的方法，但我不知道该做什么，我应该在哪里添加媒体查询以及哪些媒体查询使用 CSS.
[
[
<!doctype html>
<html class="no-js" lang="en-us"> <!--remove the "-us"? -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Established in New York City in 2001, iProbe remains a founder led business offering first class service and support">
<title>Conference Interpreters| iProbe Live Event Support Services</title>
<link rel="stylesheet" href="/css/foundation.css">
<link rel="stylesheet" href="/css/foundation-footer.css"> <!-- Must add #relative_template_path# -->
<link rel="stylesheet" href="/css/foundation-features.css">
<link rel="stylesheet" href="/css/foundation-article-card.css">
<link rel="stylesheet" href="/css/custom.css">
<link href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet">
<!-- <link rel="icon" sizes="32x32" type="image/vnd.microsoft.icon" href="/favicon_32x32.ico"/> -->
<script src="/js/vendor/modernizr.js"></script>
<script src="https://use.typekit.net/jsu5jyh.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
</head>
<body>
<div class="row">
<!-- Header and Nav -->
<header>
<!--#include file="/scripts/tools/top-bar-nav.html" -->
</header>
<!-- End Header and Nav -->
<!-- START Breadcrumbs -->
<div class="row">
<div class="large-12 columns">
<div>
<nav id="breadcrumbs" class="breadcrumbs">
<a href="/">Home</a>
<a href="/live-event-services">Live Event Services</a>
<a class="current" href="/event-support/conference-interpreters">Conference Interpreters</a>
</nav>
</div>
</div>
</div>
<!-- END Breadcrumbs -->
<div class="row">
<section class="large-12 columns">
<h1>our interpretation services</h1>
<p class="marketing">we offer interpreters for conferences, seminars and other live events:</p>
<ul>
<li>A pool of highly qualified interpreters</li>
<li>Professional sourcing and recruitment tools</li>
<li>A selection process to qualify interpreters </li>
<li>Expertise in interpretation standards, techniques and best practices</li>
<li>A technical understanding of language distribution systems</li>
</ul>
<h2>service</h2>
<p>Our interpretation terms of service encompass the following:</p>
<ul>
<li>qualified interpreters will be assigned to fit the specific event requirements</li>
<li>our interpreter coordinator or project manager will promote working conditions to allow for optimal performance of the interpreters</li>
<li>our project manager will stay informed of audio visual technical specifications that are required for multilingual meetings</li>
<li>when dealing with third party stakeholders, we will collaborate representing your best interest in the creation of a successful event.</li>
</ul>
<p>as a professional interpretation service provider we specialize in providing interpreters for corporate meetings. We also provide <a href="/film-tv-production-support/interpreters">interpreters for Film and TV production</a>.</p>
<p>we offer the benefit of fifteen years industry experience providing first rate interpreters for a variety of bilingual and multilingual meetings, conferences and other events.</p>
</section>
</div>
<div class="row">
<section class="small-12 medium-8 columns">
<h1>our guarantee: skilled accredited interpreters for your event</h1>
<p class="name">iProbe's interpreters have either a professional or para-professional level of accreditation authorities</p>
<p>professional interpreters are bound by a strict code of ethics covering confidentiality, impartiality, accuracy and reliability, and have completed training and assessment to certify that they have level of linguistic competence.
</p>
<p>our selection process to secure quality conference interpreters for our clients takes into account the language combination, the subject matter, work experience, current and past employers, membership at professional associations, education and aptitude for the assignment. The interpreter is evaluated on the required technique (consecutive, simultaneous, whispering) and experience in similar environments. We understand the importance of the interpreter’s performance and we spare no effort to ensure that the interpreters we provide have the necessary training and experience to satisfy our clients’ needs.
</p>
</section>
<div class="row">
<section class="small-12 medium-4 columns">
<div id="sidebar" class="events-press-cta panel sticky">
<h1 class="subheader">prefer to book interpreters yourself?</h1>
<p>if you prefer to keep the interpreter selection inhouse, you can book the interpreters yourself and still avail yourself of our <a href="/rentals/interpretation-equipment">simultaneous interpretation equipment rentals</a> to distribute the languages.</p>
<p>for suggestions on how to find the best simultaneous interpreters for your corporate events, conferences and conventions in and outside the United States, feel free to refer to our Interpreter Recruitment Guide <strong>(link coming soon).</strong>
</p>
</div>
</section>
</div>
</div>
<div class="row">
<div class="small-12 medium-8 columns">
<div class="panel">
<p>let us help you to select the right interpreters. Contact our interpretation specialists.</p>
<p><i class="fi-telephone"></i>+1-212-489-6035</p>
<p><i class="fi-mail"></i><a href="mailto:info@iprobesolutions.com">info@iprobesolutions.com</a></p>
<!-- <p class="button">Call <b>212-489-6035</b></p> -->
</div>
</div>
</div>
<!--#include file="/scripts/tools/aside-ad-rentals.html" -->
</div>
<!--#include file="/scripts/tools/footer.html" -->
<script src="/js/vendor/jquery.js"></script>
<script src="/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
直接在 .row 中使用 .row 不是一个好主意，删除 .row 将解决问题。
<body>
<div class="row">
好办法：
<div class="row">
<div class="columns">
<div class="row">
<div class="columns"></div>
</div>
</div>
</div>
错误方式：
<div class="row">
<div class="row">
<div>
<div class="columns"></div>
</div>
</div>
</div>